상태끌어올리기

# react 개발방식의 가장 큰 특징은 페이지 단위가 아닌, 컴포넌트 단위로 시작한다는 점이다.
먼저 컴포넌트를 만들고, 다시 페이지를 조립해나간다.
즉 상향식으로 앱을 만든다.

#데이터는 위에서 아래로 흐른다.
데이터를 전달하는 주체는 부모 컴포넌트가 된다.
-단방향 데이터 흐름(one-way data flow)

# 두개의 자식 컴포넌트가 하나의 상태에 접근하고자 할때는 두 자식의 공통 부모 컴포넌트에 상태를 위치해야한다.

---

# 하위 컴포넌트에서의 어떤 이벤트로 인해 상위 컴포넌트의 상태가 바뀐다.
상위 컴포넌트의 "상태를 변경하는 함수" 그 자체를 하위 컴포넌트로 전달하고, 이 함수를 하위 컴포넌트가 실행한다.
이게 상태 끌어올리기이다.

---

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

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

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

*상태를 변경하는 함수는 handleChangeValue이다.
*하위컴포넌트(childcomponent)가 버튼 클릭 이벤트에 따라 상태를 변경하려고 하므로 props이름을 handleButtonClick이라고 지었다.
*ChildComponent는 마치 고차함수가 인자로 받은 함수를 실행하듯, props로 전달받은 함수를 컴포넌트 내에서 실행할수있게된다.

function ChildComponent({ handleButtonClick }) {
  const handleClick = () => {
    // 인자로 받은 상태 변경 함수를 실행하자!

    handleButtonClick()
  }

  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>
  )
}

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