state Lifting(스테이트 끌어올리기)

리액트에서는 컴포넌트를 나눠서 사용한다.
이때 부모 컴포넌트에 있는 데이터를 자식 컴포넌트에서 사용하고 싶다면 props를 이용해 데이터를 주고받을 수 있다.
하지만 부모와 자식 간에 데이터 이동은 가능하지만 자식과 자식 컴포넌트끼리는 데이터를 주고받을 수 없다.
만약 다수의 자식 컴포넌트가 하나의 state의 값을 참조해 변경할 수 있다면 아주 편할 것이다.
이러한 기능을 하게 해주는 것이 스테이트 끌어올리기이다.
위 사진들을 보면 부모 컴포넌트에 있는 state와 setState를 prop를 이용해 데이터를 주고받을 수 있게 되고 다른 자식 컴포넌트가 하나의 setState를 공유해 데이터를 업데이트해줄 수 있게 된다.
위와 같은 컴포넌트 구조가 있다고 가정하고 보자
props를 이용해 내려준 onClickCount 함수가 실행되면 같은 state를 공유하고 있는 자식 두 개의 값이 같이 업데이트가 되고, 렌더링 되게 된다.
마찬가지고 자식에 있는 aaa라는 함수가 실행돼도 같은 state를 공유하고 있기에 똑같이 값이 업데이트된다.