React #14

State 끌어올리기

React는 기본적으로
컴포넌트는 Bottom-up
데이터는 Top-down

React에서 데이터는 위에서 아래로 흐르지만

아래에서 위의 데이터를 수정할 때도

있는거 같은데요? (역방향 데이터 흐름)

하위 컴포넌트의 이벤트로 부모의 상태를 변경하고 싶을 때
필요한 키워드

State 끌어올리기

상위 컴포넌트의 "상태를 변경하는 함수" 그 자체를 하위 컴포넌트로 전달하고, 이 함수를 하위 컴포넌트가 실행한다
React - React로 생각하기

예시1)

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

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

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

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

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

예시2) 자식에서 값을 설정하고 싶을 때

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

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

  // ...생략...
}

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

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

Reference
codestates: [React] 데이터 흐름의 이해와 비동기 요청 처리