WebRTC 튜토리얼 코드를 찾아보던 중에, useContext라는 것을 발견해서 찾아봤다. 먼저 리액트의 Context API를 사용하면, 프로젝트 안에서 전역적으로 사용할 수 있는 값을 관리 할 수 있다. 단계마다 일일이 props로 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다. useContext는 Context를 더 편하게 사용할 수 있게 해주는 역할을 한다. 지난 번에 마켓컬리 클론코딩을 하면서 장바구니 수량 수정하는 부분에서 드릴링을 해서 함수를 내려줘야 하는 일이 있었는데, 중간에 걸친 컴포넌트들은 함수를 사용하지 않고 전달만 했다. Context를 이용하면 props를 통해 중간 컴포넌트에 전달할 필요 없이 바로 전달받아야 하는 하위 컴포넌트에 데이터를 넘겨줄 수 있으니, 이런 경우에 사용해볼 수 있겠다! 😊
Context API를 사용하게 위해서는 createContext, Provider, Consumer 이렇게 세 가지 개념을 알고 있으면 된다.
createContext: context 객체를 생성한다.
Provider: 생성한 context를 하위 컴포넌트에게 전달하는 역할을 한다.
Consumer: context의 변화를 감시하는 컴포넌트다.
그러나 Context.Provider는 value로 저장된 값이 변경되면 useContext를 사용하는 컴포넌트도 같이 렌더링하고, Context를 추가할 때마다 Provider로 감싸줘야 하는 문제점이 있다. 그래서 깊은 곳에 위치하고 있는 컴포넌트에게 여러 컴포넌트를 거쳐서 함수를 전달해야 하는 일이 아니라면 전역 상태관리 라이브러리인 Redux나 Recoil 등을 사용하는 편이 더 좋겠다.
