S2) Unit 9. [React] React 데이터 흐름

📣  React 데이터 흐름

✔️ 컴포넌트는 컴포넌트 바깥에서 props를 이용해 데이터를 마치 전달인자(arguments) 혹은 속성(arributes)처럼 전달받을 수 있다.

➰ 데이터를 전달하는 주체는 부모 컴포넌트 -> 데이터 흐름이 하향식이다.

➰ React는 단방향 데이터 흐름이고, 컴포넌트는 props를 통해 전달받은 데이터가 어디서 왔는지 알지 못한다.

➰ 부모 컴포넌트에서의 상태가 하위 컴포넌트에 의해 변하는 것이 역방향 데이터 흐름처럼 보일 수 있다.

➰ 이를 위해서 Stste 끌어올리기(Lifting state up) 을 이용한다.

 

📣  State 끌어올리기(Lifting state up)

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

-> 여전히 단방향 데이터 흐름의 원칙에 부합한다.

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

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

  return (
    <div>
      <div>값은 {value} 입니다</div>
      <ChildComponent handleButtonClick={handleChangeValue}  />	//	props로 함수를 넘겨준다.
    </div>
  );
}

function ChildComponent({ handleButtonClick }) {	// props로 함수를 전달받는다.
  const handleClick = () => {
    // Q. 이 버튼을 눌러서 부모의 상태를 바꿀 순 없을까?
    // A. 인자로 받은 상태 변경 함수를 실행하자!

    handleButtonClick()	// props로 전달받은 함수를 컴포넌트 내에서 실행한다.
  }

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

//필요에 따라 설정할 값을 콜백 함수의 인자로 넘길 수도 있다.

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

  const handleChangeValue = (newValue) => {
    setValue(newValue);
  };

  // ...생략...
}

function ChildComponent({ handleButtonClick }) {
  const handleClick = () => {
    handleButtonClick('넘겨줄게 자식이 원하는 값')
  }

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