jjangsh 님의 블로그

01. Component  (1) 컴포넌트는 리액트의 핵심컴포넌트는 리액트의 핵심 빌딩 블록 중 하나입니다. 즉 리액트에서 개발할 모든 애플리케이션은 컴포넌트라는 조각으로 구성되죠. 컴포넌트는 UI 구축 작업을 훨씬 쉽게 만들어줍니다. 그렇지만 우리 모두, 리액트 이전에 프론트엔드 개발 환경을 경험하시지 못했다면 무엇이 불편했고 리액트와 같은 컴포넌트 기반의 UI 라이브러리가 무엇을 편하게 해 주는지 모르실 거예요.시작하면서 얘기드렸듯, 컴포넌트란 리액트의 핵심 빌딩 블록 중 하나로, UI 요소를 표현하는 최소한의 단위이며 화면의 특정 부분이 어떻게 생길지 정하는 선언체입니다. 말이 조금 어려운데,  컴포넌트를 생성하고 보여지고자 하는 UI 요소를 컴포넌트 내부에서 JSX를 통해 선언하면 이를 리액트가 ..

01. state  (1) state란 무엇일까요? 💡 State란 컴포넌트 내부에서 바뀔 수 있는 값을 의미합니다.바뀌는 이유는 UI(엘리먼트)로의 반영을 위해서입니다.  (2) state 만들기 💡 State를 만들 때는 useState()를 사용한다. import React, { useState } from 'react';function GrandFather() { const [name, setName] = useState("김할아"); // 이것이 state return ;} const name = “김할아” 라는 코드는 const [name, setName] = useState("김할아");  라는 state로 작성할 수 있습니다. 우리는 앞으로 useState 라는 함수를 이용해서 st..

01. Props의 개요  (1) props란 무엇일까요?  (1)-1. 컴포넌트끼리의 정보교환 방식 부모 컴포넌트가 자식 컴포넌트에게 물려준 데이터예요! 다시 말해, 컴포넌트 간의 정보 교류 방법입니다.props는 반드시 위에서 아래 방향으로 흐른다. 즉, [부모] → [자식] 방향으로만 흐른다(단방향).props는 반드시 읽기 전용으로 취급하며, 변경하지 않는다. (2) props로 값 전달하기   (2)-1. 전달하기(주체 : 부모) 우리는 컴포넌트 간의 정보를 교류할 때 Props를 사용합니다. 다른 컴포넌트는 생략하고 Mother만 봅시다. 만약 Mother 컴포넌트가 가지고 있는 정보(값)를 Child에게 주고 싶을 때는 아래 코드와 같이 합니다.motherName이라는 이름으로 name 값을..

01. 컴포넌트  (1) React Components란 무엇일까요?  (1)-1. 컴포넌트 개념 이해하기컴포넌트를 통해 UI를 재사용이 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있습니다. 개념적으로 컴포넌트는 JavaScript 함수와 유사합니다. “props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환합니다.  (1)-2. 리액트 컴포넌트를 표현하는 두 가지 방법 1. 함수형 컴포넌트// props라는 입력을 받음// 화면에 어떻게 표현되는지를 기술하는 React 엘리먼츠를 반환(return)function Welcome(props) { return Hello, {props.name};}// 훨씬 쉬운 표현funct..

01. 리액트 프로젝트 생성 방법  (1) CRA(Create React App) (1)-1. CRA란?  한 줄의 명령어 입력으로 React 프로젝트 개발에 필수요소를 자동으로 구성하는 방법React 프로젝트를 구성하기 위해 필요한 것들은 상당히 많다!  WebPack, babel, eslint 등.이러한 것들을 신경 쓰지 않아도 알아서 → 보일러플레이트  (1)-2. CRA로 리액트 프로젝트 셋업하기윈도우는 git bash 또는 power shell에서 mac os는 터미널(zsh)에서 아래 코드를 입력. 참고로 power shell 은 윈도우 터미널 프로그램이고, git bash는 우리가 git을 설치했을 때 같이 설치되는 터미널 프로그램이다.맥을 쓰면 맥 터미널을 사용!프로젝트 셋업을 원하는 경로..