[React] 데이터 흐름

📝[Section2_Unit9] 클라이언트 Ajax 요청 : React 데이터 흐름

📌 React의 데이터 흐름

React는 기본적으로 단방향 데이터 흐름(One-way data flow)를 따른다. 즉, 컴포넌트는 props를 통해 전달받은 데이터가 어디서 왔는지 전혀 알지 못한다.

기본적으로 자식 컴포넌트는 변하는 것을 state, 변하지 않는 것은 props로 부모 컴포넌트에게서 전달받아 사용한다. 만약 두개의 자식 컴포넌트가 같은 state를 사용하길 원한다면 그 둘의 공통된 부모 컴포넌트에 state를 배치해야 한다.

❓만약 하나의 자식 컴포넌트에서 부모 컴포넌트에 있는 state를 변경하길 원한다면?

➡️ 콜백 함수를 사용하듯이 상태를 변경시키는 함수(handler)를 하위 컴포넌트에 props로 전달해서 사용한다.

✔️ state 끌어올리기

export default function ParentComponent() {
  const [value, setValue] = useState("바꾸기 전의 값");

  const handleChangeValue = () => {
    setValue("바뀐 후의 값");
  };

  return (
    <div>
      <div>값은 {value} 입니다.</div>
      <ChildComponent handleButtonClick={handleChangeValue}/>
    </div>
  );
}

function ChildComponent({ handleButtonClick }) {
  const handleClick = () => {
    handleButtonClick()
  };

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