15. State lifting

State lifting

React는 저번에도 배웠듯 부모에서 자식으로만 데이터가 전송되는 단방향 데이터 플로우를 가지고 있다. 이로 인해서 생길 수 있는 문제가 바로 형제  컴포넌트로의 데이터 전송이 불가능 하다는 것이다. 이것을 해결하기 위해서 형제 컴포넌트의 데이터를 서로의 부모 컴포넌트로 올려 두는 것으로 해결할 수 있다.

 

 예시 그림

 

위 그림 처럼 원래 자식 컴포넌트1에 있던 데이터를 부모에게 넘겨주고 그걸 다시 props를 통해서 자식에게 전달해 주는 것으로 형제가 같은 데이터를 공유하며 사용할 수 있게 된다. 

 

이를 통해서 Pagination과 리스트 목록을 분리해서 pagination을 다른 곳에서도 쓸 수 있도록 만들 수 있었다.

 

예시 코드

위 예시 코드는 서로 같은 부모를 둔 형제 컴포넌트가 list의 page를 공유하고 있는 것을 확인 할 수 있습니다.