[React] Context API 란

이혜란·2025년 8월 25일

React

목록 보기
11/11

Context API 란 리액트가 자체적으로 제공하는 상태 관리 방법입니다.
컴포넌트 트리 안에서 전역적으로 사용할 수 있는 값을 관리하고,
Props Drilling을 방지해주며 컴포넌트 간 상태를 쉽게 공유 가능하도록 합니다.
Context API는 데이터를 공유하기 위한 방법으로 사용이 되는데 예를 들어 로그인한 사용자의 정보나 테마, 언어 설정 등에 사용될 수 있습니다.

Context API의 장점으로는 Props Drilling 문제를 해결해주고 추가적인 라이브러리를 설치할 필요가 없다는 점 입니다.
단점으로는 복잡한 상태관리는 어려울 수 있다는 점과 너무 많은 Context를 사용하면 재사용성이 떨어진다는 점이 있습니다.

따라서 Context API 는 전역적으로 관리해야하는 상태가 있는 경우에 유용하고,
사용자 세션을 관리하거나 다크모드와 같은 UI 테마를 관리하고 언어 설정을 변경하는 등과 같이
여러 컴포넌트에서 상태가 필요하지만 간단한 경우에 유용하게 사용될 수 있습니다.
이러한 경우에 사용되면 코드의 복잡성을 줄여주고 가독성을 향상시킬 수 있습니다.

사용 방법

Context를 생성합니다
Provider를 설정합니다
Consumer 또는 useContext 훅을 사용하여 데이터를 가져와 사용합니다.

아래는 로그인 정보를 전역으로 활용하기 위한 Context 생성 예시 코드입니다.
createContext로 user 객체를 생성하고 초기 값으로 null을 생성합니다.
AuthContextProvider를 생성하여 firebase에서 사용자 정보를 가져와 useState에 설정해주고
해당 값을 AuthContext.Provider 의 value에 넣어줍니다.

생성해준 AuthContextProvider를 최상위 경로에 가져와 전역에서 사용할 수 있도록 감싸줍니다.

사용자 정보가 필요한 컴포넌트에서 useContext를 사용하여 컨텍스트 데이터를 바로 가져와서 사용할 수 있습니다.

0개의 댓글