Context API
- React 16.3 버전부터 지원
- props-drilling 을 제거하기 위해 탄생
- 간단한 전역변수 ( ex.theme, intl)를 선언할 때 사용
Redux와 같은 여러 상태관리 라이브러리를 제공하고 있지만, Redux 틑 사용하기까지 해야되는 작업이 많고, 이해해야하는 러닝커브가 있습니다.
간단한 상태관리를 할 때에는 Context API를 사용할 수 있습니다.
Context API 구성요소
Provider
값을 제공해주기 위하여 root component로 사용합니다.
const SomeContext = createContext();
const componentA = () =>{
return (
// 또 다른 View code
<SomeContext.Provider value = {`testVale`}>
{/*값을 사용해야하는 컴퍼넌트들*/}
</SomeContext.Provider>
)
};Provider가 가지고 있는 props 중에서는 value가 있습니다.
전역으로 설정한 값들을 여기에 지정을 해주면 value가 들어가게되고,
child로 선언하게되면 해당 값들을 사용할 수 이ㅏ있는 상태가 됩니다.
Provider가 갖고있는 value가 변경되면, value를 사용하지 않는 child 라 하더라도 reder 가 호출되기 때문에 사용시에 주의해야합니다.
Consumer
제공된 값에 접근할 수 있도록 하는 것입니다.
const componentB = () =>{
return (
// 또 다른 View code
<SomeContext.Consumer>
{(context) =>
{/* child에 있는 컴포넌트에서만 값 사용 가능 */}
}
</SomeContext.Consumer>
)
};Provider 가 제공하는 값의 변화를 구독합니다.
Consumer의 chiledren 은 함수로 이루어져야합니다.
함수에서 지정되있는 value 값들을 return해주게 되어 있습니다.
Redux 와의 차이점
Context API 는 상태 관리 도구가 아니며, 전역 변수를 관리합니다.
상태 관리 도구의 조건
- 초기값을 저장하는가 ?
- 스스로 값을 읽어올 수 있는가 ?
- 스스로 값 업데이트가 가능한가 ?
Context API 는
Provider에서 value 등을 설정 가능하기 때문에 초기값을 저장할 수 있습니다.
하지만, 스스로 값을 업데이트 하는 것은 아니고, 외부에 있는 state 값을 통해 값을 가져오기만 합니다. 업데이 하고자 하면 state 에있는 update function 을 가져오는 등 별도로 관리를 해 주어야 합니다.
Redux 는
초기 값은 store 생성시 reducer에서 초기값을 지정합니다.
스스로 값을 selecter 에서 가져올 수 있으면서, dispatch를 통해 reducer의 값을 업데이트 합니다.
같은 전역상태관리 툴이 아니기 때문에 비교대상이 아닙니다.
Context API 는 값에 대한 전체 공유이지 상태관리가 아닙니다.
Context API 가 주로 사용되는 곳
주로 static 한 잘 변경되지 않는 정보에 대해서 적용합니다.
- App theme 저장 (light , dark)
- 다국적 앱에서 언어 팩 등
