State Lifting

리액트의 state를 사용하다보면 동일한 state의 변경을 여러 컴포넌트에 적용해야 하는 경우가 종종 생긴다. 리액트에서 데이터는 보통 컴포넌트를 통해 부모에서 자식으로, 하향식으로 전달된다. 변경사항을 부모 컴포넌트에서 자식 컴포넌트로의 전달하는 것은 props를 사용하면 가능하지만,

자식 컴포넌트의 state 변경으로 부모 컴포넌트에 영향을 미치고 싶을 경우에는 어떻게 해야할까?

State Lifting

이 방법을 state lifting(상태 끌어올리기)라고 부른다.

자식 컴포넌트에 선언된 state를 부모 컴포넌트에 선언하고 setState함수를 자식 컴포넌트에 넘겨주는 것이다.

자식 컴포넌트에 선언된 state는 지우고 부모 컴포넌트에 선언한 다음, setState 함수를 props로 자식 컴포넌트에 전달해준다. 자식 컴포넌트는 트리거 함수를 만든 다음, 거기에 props로 받아온 props.setState함수를 선언하고 원하는 값을 넣는다.

자식 컴포넌트에서 트리거 함수가 이벤트 핸들러로 인해 실행되면 setState함수가 실행되고 그에 따라 바뀐 state가 부모 컴포넌트에 적용된다.

만약 같은 state를 공유하는 컴포넌트가 많아지면, 같은 state를 공유하는 컴포넌트들의 공통 부모 컴포넌트를 찾아서 그곳에서 state를 선언하고 setState함수를 아래로 내려주면 된다.