React의 useContext가 무엇일까

React의 내장 훅 중 하나인 useContext를 이해하기 위해 쓰는 글

useContext란 무엇일까?

React 공식 문서는 아래와 같이 설명한다.
useContext is a React Hook that lets you read and subscribe to context from your component.

컴포넌트로부터의 context를 구독하고 읽을 수 있게 해주는 훅이다..?

여기서 이 context란 뭘까?

React에서 말하는 context는 컴포넌트 트리 전체에 걸쳐 전역적으로 데이터를 공유할 수 있게 해주는 메커니즘을 의미한다고 한다.

보통 컴포넌트는 부모에서 자식으로 props를 통해 전달하지만, 컴포넌트가 깊게 중첩되어 있거나 많을 때는 prop drilling이 발생한다.
context는 이 문제를 해결하기 위해 만들어진 기능!

context의 역할은
특정 데이터를 전역적으로 관리하며, 트리 구조 안의 모든 컴포넌트에 직접 접근할 수 있도록 만들어주는 React의 내장 API이다!

useContext를 사용하는 코드를 살펴보자!

1. createContext()를 정의하기

• 재사용과 유지보수를 위해 context를 정의하는 전용 파일에 작성
  
• 여기서 이 MyContext는 Context 객체
  : Provider(데이터 제공)과 Consumer(데이터 구독/읽기) 제공

2. 상태를 사용할 컴포넌트 상위에서 Provider로 감싸주기

• Provider 파일에서 useState로 초기값 정의해주며 Provider에 value로 값 보내주기
  
• 해당 Provider 컴포넌트를 App에서 상태를 사용할 컴포넌트 상위에 감싸줌
  

3. 하위 컴포넌트에서 상태 가져와 사용

• useContext() 안에 createContext()로 정의해준 context 이름을 넣어줌
• 상태를 가져와 사용함으로서 해당 컴포넌트는 subscriber(구독자)가 되는 것임
  

전역 상태가 많아질수록 어떻게 해야할까?

역할별로 context를 나누는 방식으로 구현한다!

작은 프로젝트를 할 때는 Context를 역할별로 나누고 사용해도 좋지만,
규모가 커짐으로써 Redux, Zustand, Recoil 같은 상태 관리 라이브러리를 사용함으로써 더 효율적으로 코드를 작성할 수 있다!