[TIL - 2022.8.9~8.10 StatesAirline Client]

공부한 내용

Lifting State Up

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

상위 컴포넌트에서 하위 컴포넌트로 props(위 코드에서는 함수)를 전달하면 하위 컴포넌트에서는 이것을 실행해서 상위 컴포넌트에 있는 로직이 실행되도록 한다.

여담

useEffect,useState 원리를 좀 알아볼려고 블로그 찾아보는데 클로저가 또 나온다....
특히 useEffect는 자료 찾아봐도 이해가 잘 안가서 아고라에 질문 올렸는데 어렵네 진짜...