Context API
React에서 전역적으로 데이터를 관리하고, 컴포넌트 트리 전체에 걸쳐 props를 '끌어내리는' 것을 피하기 위해 사용되는 기능입니다. 이를 사용하면 여러 컴포넌트에 걸쳐 데이터를 쉽게 공유할 수 있습니다.
Context API란?
Context API는 React 16.3에서 소개된 기능으로, 컴포넌트 트리 안에서 데이터를 전역적으로 공유할 수 있는 방법을 제공합니다. 이를 통해 prop-drilling(상위 컴포넌트에서 하위 컴포넌트로 props를 계속 전달하는 것) 문제를 해결할 수 있습니다.
기본 개념
기본 동작 순서
Context 생성: React.createContext() 함수를 사용하여 Context를 생성합니다. 이 함수는 Provider와 Consumer라는 두 개의 컴포넌트를 반환합니다.
const MyContext = React.createContext(defaultValue);Provider: Context 객체에 포함된 Provider 컴포넌트는 Context를 구독하는 컴포넌트들에게 Context의 변화를 알립니다. Provider는 value prop을 받아서 하위 컴포넌트에게 전달합니다.
<MyContext.Provider value={/* 어떤 값 */}>Consumer: Context 변화를 구독하는 컴포넌트입니다. Consumer 컴포넌트는 함수 자식 패턴을 사용하여 Context의 현재 값을 받습니다.
<MyContext.Consumer>
{value => /* 컨텍스트 값을 기반으로 렌더링 */}
</MyContext.Consumer>useContext Hook: React 16.8부터 추가된 Hooks API를 통해 함수 컴포넌트에서 Context를 더 쉽게 사용할 수 있습니다.
const value = useContext(MyContext);Context API를 어디에서 활용 할 수 있을까요 ?
테마 관리: 웹사이트의 어두운 모드/밝은 모드 테마 같은 UI 설정을 전역적으로 관리할 수 있습니다.
사용자 데이터: 로그인한 사용자의 정보를 여러 컴포넌트에 걸쳐 공유할 수 있습니다.
다국어 지원: 다양한 언어로 된 텍스트를 앱 전체에 걸쳐 관리할 수 있습니다.
장점
Prop-drilling 문제를 해결하여 코드의 복잡성을 줄일 수 있습니다.
전역적인 데이터를 쉽게 공유하고 관리할 수 있습니다.
단점
오용 시 애플리케이션의 구조가 복잡해질 수 있습니다.
Context의 값이 바뀔 때마다 소비자 컴포넌트들이 재렌더링됩니다. 따라서 성능에 영향을 줄 수 있습니다.
좋은 사용법
전역적으로 사용되는 데이터에 대해서만 Context를 사용합니다.
성능 문제를 피하기 위해 필요한 부분에서만 Context를 구독합니다.
여러 Context를 만들어 관심사를 분리하는 것이 좋습니다.
Context API는 애플리케이션의 상태 관리를 위한 유용한 도구이지만, 그 사용은 신중하게 고려되어야 합니다.
