context api에 대한 개념을 명확히 하고자 정리해보고자 한다.
📌 context api
-
React에서 Context는 컴포넌트 트리 전체에 데이터를 공유할 수 있게 해주는 기능.
-
props drilling 문제를 해결하기 위해 도입
📌 사용 방법
1. Context 생성하기
import { createContext } from 'react';
const MyContext = createContext<MyContextType | undefined>(undefined);2. Provider로 데이터 제공하기
function App() {
const [value, setValue] = useState('초기값');
return (
<MyContext.Provider value={{ value, setValue }}>
<ChildComponent />
</MyContext.Provider>
);
}3. useContext로 데이터 사용하기
import { useContext } from 'react';
function ChildComponent() {
const context = useContext(MyContext);
return <div>{context.value}</div>;
}📌 Context 사용 시 주의사항
Provider를 사용하지 않을 경우
-
createContext의 인자로 기본값을 지정하지 않으면, Provider 없이 사용 시 undefined가 반환된다.
-
기본값 설정 예시:
// 기본값이 없는 경우
const DontHaveDefaultContext = createContext<void | null>(null);
// 기본값이 있는 경우
const HaveDefaultContext = createContext('default value');안전한 Context 사용을 위한 커스텀 훅
Provider 없이 Context를 사용하는 실수를 방지하기 위해 커스텀 훅을 만들 수 있다:
function useMyContext() {
const context = useContext(MyContext);
if (context === undefined) {
throw new Error('!!useMyContext는 Provider 내부에서 사용해야합니다!!');
}
return context;
}📌 Context의 적절한 사용 시점
Context의 주된 용도는 다양한 레벨에 중첩된 많은 컴포넌트에 데이터를 전달하는 것이다. Context를 사용하면 컴포넌트 재사용성이 떨어질 수 있으므로 적절하게 사용하는 것이 좋다.
출처 : https://ko.legacy.reactjs.org/docs/context.html
1) 전역적인 UI 테마나 설정 - 다크모드/라이트모드, 언어 설정, UI 선호도 등 전체 애플리케이션에 영향을 미치는 설정들
인증 정보 - 로그인한 사용자 정보, 권한 등을 여러 컴포넌트에서 필요로 할 때
2) 프롭 드릴링(Prop Drilling) 방지 - 중간 컴포넌트들은 데이터를 사용하지 않고 단지 하위 컴포넌트로 전달만 하는 경우가 3-4단계 이상 깊어질 때
3) 전역 상태가 단순한 경우 - 상태 구조가 복잡하지 않고, 상태 변경 로직이 간단할 때
반대로 이러한 경우에는 전역상태 관리 도구 (mobx,zustand,redux)를 사용하는 것이 더 좋다.
1) 복잡한 상태 로직
2) 성능 최적화 필요 - Context API는 Provider 내부의 모든 컴포넌트가 리렌더링될 수 있어 성능 이슈가 발생할 수 있다.
3)상태 변화를 추적하고 되돌리는 기능
4) 지연 로딩 - 코드 분할(code splitting)을 통해 필요한 상태만 로드하고자 할 때
📌 Context API와 상태 관리 라이브러리 비교
| 구분 | Context API | 상태 관리 라이브러리 |
|---|---|---|
| 작동 방식 | React 기본 기능으로 데이터를 전역으로 전달 | Redux, Zustand, Recoil 등 다양한 라이브러리로 중앙 집중화 및 최적화 관리 |
| 특징 | - 데이터 전달을 주목적으로 설계 - 상태 변경 시 관련 모든 구독 컴포넌트 리렌더링 - 단순한 상태 관리에 적합 | - 특정 상태만 리렌더링 최적화 - 중앙 집중식 상태 관리 - 디버깅 및 미들웨어 지원 |
| 장점 | - React 내장 기능 (추가 의존성 없음) - 간단한 상태 전역 관리에 적합 | - 복잡한 상태 관리에 적합 - 상태 변경 시 성능 최적화 - 비동기 작업 지원 |
| 단점 | - 상태 변경 시 관련 컴포넌트 모두 리렌더링 - 최적화가 어렵고 성능 이슈 발생 가능 | - 추가 설정 및 학습 곡선 - 간단한 프로젝트에서는 과도할 수 있음 |
| 사용 사례 | - 사용자 인증 정보 (ex., isAuthenticated) - 테마 설정 (ex., 다크/라이트 모드) - 드릴링 문제 해결 | - 복잡한 상태 구조 - 비동기 작업 및 서버 상태 관리 - 성능 최적화가 필요한 대규모 애플리케이션 |
