React 내부에서 구현할 수 있는 전역상태 관리 라이브러리 Context API 에 대해서 알아보려고 합니다.
1. 전역 상태 관리가 왜 필요한가?
알아보기 전에 이것이 왜 나오게 되었는가에 대한 배경을 알아봅시다. 공식문서를 찾아보니 언어의 경우로 따지면, 로그인한 유저의 선호 언어에 따라 보여줘야하는 경우가 생기는데, 이때 모든 컴포넌트에 lang 요소를 props로 넘겨주기에는 글자에만 이 요소를 넣어주면되는데, 이를 위해 쓸데없는 곳까지 넘겨줘야하는 props drilling 현상이 발생한다고 합니다.
해당 코드를 코면 App -> Parent -> Child -> Grandchild 순으로 트리가 형성 된것을 볼 수 있고 App 컴포넌트에 있는 lang의 정보는 Grandchild에서 필요한데, 그 중간인 Parent, Child는 필요하지 않는 모습을 볼 수 있습니다. 이러한 불편한 요소를 제거하기 위해 context를 통해 React 컴포넌트 트리 안에서 전역적으로 데이터를 공유할 수 있도록 만들게 되었다고 합니다.
2. Context API 사용방법
1. createContext 를 생성하여 만들고 싶은 데이터를 생성합니다.
2. Provider를 통해 해당 값이 필요한 모든 컴포넌트를 감싼다.
3. value를 통해 Provider에 해당 값을 넣는다.
4. 해당 값을 사용하려는 컴포넌트에서 useContext 함수를 통해 사용한다.
4. (선택) consumer를 통해 사용한다.
3. Context API 의 한계
사실 이것을 알기 위해 context API에 대해서 알아본건데, 이렇게 내부적으로 전역상태관리를 할 수 있는데도 불구하고 Redux, zustand, recoil, jotai, tanstack-query 와 같은 외부 라이브러리를 사용하는 것이 궁금했습니다. 이번에 context api를 알아보면서 한계점을 알아보니 그에 대한 이유를 알 수 있었습니다.
1. 불필요한 리렌더링
위에 설명에는 필요한 곳에 값을 전달하기 때문에, 이러한 문제가 발생되지 않을 것이라고 생각했는데, 다른 외부 라이브러리는 selector, store와 같이 해당 값에 대해서 관리를 하기가 쉬운데, context API는 좀 불편하다고 생각합니다. 할 수는 있지만 좀 코드가 깔끔하지 않은 현상이 보였습니다.
2. middleware, devtools의 부재
displayName 을 통해 이렇게 무엇에 대한 값을 provider하고 있는지 확인 할 수 있지만, 다른 라이브러리 처럼 디버깅을 위한 도구가 지원되지 않고, middleware에 대한 지원을 하지 않습니다.
개발을 할 때 보면 이 값이 어떻게 변화하고 있는지에 대해서 항상 보면서 확인을 해야하는데 context api는 이러한 기능이 없어서 일일히 확인해야하는 불편함이 있다고 합니다.
3. 비동기 작업 관리 부족
fetch, axios, async 의 작업을 관리하는 기능이 부재해서 다른 라이브러리는 형식이 정해져서 학습만하면 사용할 수 있지만 context api는 이를 구현하기 위해서 일일히 구현해야하는 불편함이 생깁니다. 그 과정에서 프로젝트의 규모가 커지면 커질수록 이를 관리하는게 쉽지 않다고 합니다.
글을 마치며
context api는 진짜 간단한 프로젝트를 구현하고 싶을 때, 외부 라이브러리를 굳이 사용하지 않아도 될때 사용하는 것이 좋을 것 같다. 이를 통해 전역상태관리가 어떻게 이루어지는 지에 대해 알아볼 수 있었고, 다른 라이브러리는 어떻게 만들어지고 운용되는지를 알 수 있어서 의미있는 시간이라고 생각합니다.
참고자료
https://ko.legacy.reactjs.org/docs/context.html : react 공식문서
'개발 > React' 카테고리의 다른 글
| [React with TypeScript] TodoList 만들기 - 1 (0) | 2024.11.05 |
|---|