[1] State Lifting

• 자식 컴포넌트에서 state값을 변경시켜 부모 컴포넌트를 렌더링 시킬 떄 사용하는 방법이다.

• 자식 컴포넌트에서 부모 컴포넌트를 리렌더링 시킬 수 있지만 부모 컴포넌트에 붙어있는 다른 자식 컴포넌트까지 리렌더링을 발생시킬 수 있으므로 주의해야 한다.

• props로 부모의 state값을 변경시킬 수 있는 setState나 setState를 담은 함수를 보내주어 작동 시킬 수 있다. props로 전달을 해줌으로써 props드릴링이 발생할 수 있다.

• 부모컴포넌트 1개에 2개의 자식 컴포넌트를 주어서 자식끼리 상태값을 공유 할 수도 있다.

[2] 예시

자식 컴포넌트에서 버튼을 클릭하면 부모컴포넌트의 상태값이 변경되는 예제

[부모컴포넌트]

const ParentComponent = () => {
  const [number,setNumber] = useState(0);

  const changeState = () => {
    setNumber((prev) => prev + 1);
  }

  return (
    <div> 
       <h1> {number} </h1>
      <Child1Component changeFunc = {changeState} number={number}/>
      <Child2Component changeFunc = {changeState} number={number}/>
    </div>
  )
}
export default ParentComponent;

[자식컴포넌트1]

const Child1Component = (props) => {

  return (
    <div> 
      <div> {props.number} </div>
      <button onClick = {props.changeFunc}
    </div>
  )
}
export default Child1Component;

[자식컴포넌트2]

const Child2Component = (props) => {

  return (
    <div> 
      <div> {props.number} </div>
      <button onClick = {props.changeFunc}
    </div>
  )
}
export default Child2Component;