React.js는 단방향 데이터 흐름(one-way data flow)을 가집니다.
부모 컴포넌트에서 자식 컴포넌트 방향으로 props를 통해 데이터를 전달하는 것이 일반적입니다.
(물론, setState 함수를 자식 컴포넌트에 props로 전달하여 state 값을 부모로 끌어올리는 것도 가능)
이러한 특징은 서비스의 구조를 직관적으로 만들어주었지만
몇 가지 비효율 또한 발생하였습니다.
1-depth 사이의 부모-자식 컴포넌트 간에 setState 함수를 전달하여 state를 끌어올리는 것은 간단할 수 있습니다.
하지만, 여러 depth 차이의 컴포넌트 간에 state를 전달한다고 생각하면 어떨까요?
쓸데없이 state가 전달되는 bridge 컴포넌트가 반드시 존재하여야 합니다. 비효율적이겠죠?
또한, 여러 컴포넌트에서 동일한 state 값을 사용하고 싶은 경우도 있을 것입니다.
물론 로컬스토리지에 저장하여 사용할 수도 있지만
바로 바로 변화를 화면에 반영해줘야 되는 경우에는 state를 모두 공유하여야 할 것입니다.
이런 경우에는 어떻게 해야할까요?
최상위 부모에 state를 정의해두고, 해당 state를 공유하길 원하는 자식 컴포넌트로 다 내려주어야겠죠? 또 비효율이 보이는 것 같습니다. 원하는 컴포넌트에게만 state가 공유되면 될텐데 말이죠!