리액트 기초 수업 2일차

React 기초 수업이 시작한지 2일이 지나간다. 처음 여유로웟던 2주와 다르게 하루하루가 어제 밀린 과제 목록을 복습하고, 뒤늦은 시간에야 다음날에 학습할 수업을 예습하고자 첫 장을 편다. 회사 다닐 때 느끼지 못했던 쫒기는 기분.. 대학교 시험기간에도 느끼지 못했던 두려움이다. 그 덕분에 나는 인생에 있어서 가장 의자에 오래 앉아 있는 시간을 보내고 있다. 그리고 오늘도 내일의 수업을 미리 글로 끼적이며 머리에 넣어보고자 블로그를 열었다. 과연 내가 지금 이 블로깅을 마친 후 state와 props를 얼마나 이해하고 있을지... 의문이다.

React State & Props

State는 변할 수 있는 값이며, 컴포넌트 내부에서 작성된다. 반면에 props는 외부에서 인자 등으로 전달 받는 값이며, 처음부터 정해진 값들이다. 사람이란 주체로 예를 들면, 이름과 성별은 props이고 사는 곳, 나이, 직장 등은 변할 수 있는 값 state라고 할 수 있다.

State 예시

아래 그림은 + 또는 - 버튼을 눌렀을 때, 숫자가 카운트 되는 컴포넌트이며, 이 컴포넌트 내부에 존재하는 state는 카운트되는 숫자라고 볼 수 있다.

Props 특징

• 컴포넌트의 속성을 의미함.
• 변하지 않는 외부(상위/부모 컴포넌트)로부터 전달 받은 값(함수의 인자처럼)
• 객체 형태로 존재함.
• 변경이 되지 않는 값이기 때문에 읽기 전용 이라고 이해할 수 있음.

Props 동작 원리

나름대로 아래 코드를 보고 이해한 바를 정리해보았다.

function Parent() {    ->'Parent' 부모요소
  return (
    <div className="parent"> {
        <h1>I'm the parent</h1>
        <Child text={'안녕하세요 여러분'} />  -> props로 전달할 값을 속성으로 정의 해줌
    </div>                                 여기서 속성은 text={'안녕하세요 여러분'}
  );
};

function Child(props) {   -> 위에서 Child컴포넌트에 속성으로 적어준 값은 이 곳 props인자에
  return (                    객체 형태(키:값)로 전달 됨.
    <div className="child">
        <p>{props.text}</p>  -> 때문에 p태그 안에서 해당 값을 javascript에서
    </div>                         객체 값을 불러오는 방식과 같은 방법으로 불러올 수 있음.
  );                               즉, {props.text}
};

State 동작 원리

나름대로 아래 코드를 보고 이해한 바를 정리해 보았다.

import { useState } from "react";  -> 우선 useState 함수를 사용하기 위해 import로 불러왔다.                                      

function CheckboxExample() {                         -> useState를 호출하면 배열 형태로 반환이 됨.
                                                       때문에 isChecked는 useState의 배열 0번
  const [isChecked, setIsChecked] = useState(false);   setIsChecked는 배열 1번임.
                  									   isChecked는 현재 state변수 setIsChecked는
                                                       현재 변수를 갱신할 수 있는 함수, 마지막으로
                                                       useState의 인자 값은 상태의 초기 값.
    
    const handleChecked = (event) => {   -> 이벤트 핸들러 함수를 선언.             
    setIsChecked(event.target.checked);   -> 핸들러 함수가 호출되면 아래 setIsChecked 함수(상태 변환 함수)
    };                                       를 호출하게 되며 현재 상태 값, isChecked변수가 갱신됨                                        	
  return (                                   setIsChecked 괄호 안에는 해당 함수가 필요로하는 인자 값                               
    <div className="App">
      <input type="checkbox" checked={isChecked} onChange={handleChecked} />
      <span>{isChecked ? "Checked!!" : "Unchecked"}</span>
    </div>  -> isChecked는 애초에 true,false 값을 가지기 때문에 삼항 연산자를 이용할 수 있음. 
  );        -> 위에서 input type속성의 checkbox에서 변화가 일어나는 이벤트가 발생하면
}              위에 핸들러 함수를 호출하는 것으로 정리 됨.