React 커스텀 훅을 여러 컴포넌트에서 사용할 때 문제

Question

React에서 커스텀 훅을 만들어서 그 안에 있는 상태값을 여러 컴포넌트에서 사용하려고 합니다.
컴포넌트 A와 컴포넌트 B안에서 같은 훅을 호출해서 상태값을 사용하고 있는데 A에서 상태값을 변경했을 때 변경된 값이 B에 반영되지 않습니다. 해결 방법을 아시는 분이 있을까요?

이은재 · Answer

component A와 B에서 custom hook을 각각 호출하시면 각각 독립된 상태값을 갖게 됩니다. 같은 hook에서 가져온 상태값이라도 A component에서 가져온 상태와 B component에서 가져온 상태는 다른 상태값입니다.

두 component가 같은 상태값을 공유하도록 하고 싶으면 해당 훅을 A와 B를 모두 포함하는 상위 컴포넌트에서 호출해 상태 값을 props로 넘겨주거나, 어려울 경우 전역 상태를 관리하는 라이브러리를 이용해 전역 상태로 관리해야할 것 같습니다.