State, state Hook과 Props

• State는 컴포넌트 내부에서 변할 수 있는 값을 의미한다.
  사용자가 텍스트를 작성하거나 체크 박스를 선택하면 변하는 값을 의미한다.
  그리고 우리는 state hook을 이용하여 state와 같은 특징들을 쉽게 사용할 수 있다.
• props는 외부에서 받은 값으로, 변하지 않는 값이다.
  상위 컴포넌트로부터 전달받은 값인 props는 객체형태로, 읽기 전용인 데이터이다.

state hook

import { useState } from "react";

const [isChecked, setIsChecked] = useState(false);
// 구조 분해 할당으로 useState의 값을 받아온다.
// [상태 변수, 상태 변화 함수] = useState(초기값);

function clickCheck() {
   setIsChecked(true);
}

 return (
    <div>
      <input type="checkbox" checked={isChecked} onChange={clickCheck} />
      <span>{isChecked ? "선택되었습니다." : "선택하지않았습니다."}</span>
    </div>
  );

• state는 state = false와 같이 강제로 변환할 수 없다.
• state가 변해야 페이지는 다시 렌더링되는데, 배열이 state일때는 새로운 배열(깊은복사된) 이어야 페이지가 다시 렌더링된다. (같은 배열은 주소가 같기에 변화를 감지하지 못한다.)

Props

• 리액트의 데이터는 기본적으로 위에서 아래로만 전달된다.
• 만약 두 개의 children 컴포넌트가 하나의 상태에 접근하고자 한다면, 두 컴포넌트의 공통 조상의 컴포넌트에 상태가 위치해야 한다.

• props 사용하기

function Parent() {
  return (
    <div className="parent">
      <h1>안녕하세요</h1>
      <Child name={"Hi"} />
    </div>
  );
};

function Child(props) {
  return (
    <div className="child">{props.name}</div>
  );
};

• 또는 구조분해 할당으로 받아올 수 있다.

function Parent() {
  return (
    <div className="parent">
      <h1>안녕하세요</h1>
      <Child name={"Hi"} />
    </div>
  );
};

function Child( { name } ) {
  return (
    <div className="child">{name}</div>
  );
};

• 태그 사이에 값을 넣고 props.children으로 값을 받아올 수도 있다.

function Parent() {
  return (
    <div className="parent">
      <h1>안녕!</h1>
      <Child>{"Hi!"}</Child>
    </div>
  );
};

function Child(props) {
  return (
    <div className="child">{props.children}</div>
  );
};

• 하위 컴포넌트에서 상위 컴포넌트로 데이터를 보내기 위해서 함수를 사용한다.

import { useState } from "react";

function Parent() {

  const [inputValue, changeValue] = useState("");
  
  return (
    <div className="parent">
      <h2>{inputValue}</h2>
      <Child changeValue={changeValue}/>
    </div>
  );
};

function Child( {changeValue} ) {

  const getValueFromInput = (event) => {
    changeValue(event.target.value);
  }

  return (
    <input type="text" onChange={getValueFromInput}/>
  );
};

State와 Props를 구분하는 것은 중요하다.

어떤 데이터를 state로 두어야 할까?

• 부모 컴포넌트로부터 props를 통해 전달되면 state가 아닙니다.
• 시간이 지나도 변하지 않는다면 state가 아닙니다.
• 컴포넌트 안의 다른 state나 props를 가지고 계산할 수 있다면 state가 아닙니다.