React의 데이터 흐름과 State 끌어올리기

🎢 React 데이터 흐름

• React에서 하나의 컴포넌트는 한 가지 일만 한다.
• 컴포넌트는 컴포넌트 바깥에서 props를 이용해
  데이터를 마치 전달인자 혹은 속성 처럼 전달받을 수 있다.
• 즉 데이터를 전달하는 주체는 부모 컴포넌트가 된다.
• 이는 데이터 흐름이 하향식임을 의미한다.

🏋🏻‍♀️ State 끌어올리기

• 상위 컴포넌트의 상태를 변경하는 함수 그 자체를 하위 컴포넌트로 전달하고, 이 함수를 하위 컴포넌트가 실행한다.

export default function ParentComponent() {
  const [value, setValue] = useState("날 바꿔줘!");

  const handleChangeValue = () => {
    setValue("보여줄게 완전히 달라진 값"); //value 변경
  }; 

  return (
    <div>
      <div>값은 {value} 입니다</div>
      <ChildComponent handleButtonClick={handleChangeValue} /> 
	//ChildComponent에 value변경을 넘겨준다.
    </div>
  );
}

function ChildComponent({handleButtonClick}) {
  const handleClick = () => {
    handleButtonClick() //번튼을 클릭할때 넘겨 받은 함수를 실행
  };

  return <button onClick={handleClick}>값 변경</button>;
}

• 값은 날 바꿔줘! 입니다 => 값은 보여줄게 완전히 달라진 값 입니다 로 변한다.