상태관리
는 리액트에서 state(= 상태)
데이터를 효율적으로 관리하는 것을 말합니다.
리액트는 상태(state)의 전달을 단방향(부모 -> 자식)으로만 받기때문에 트리구조로 얽힌 컴포넌트 구조에서는 props들이 어디서부터 내려온 것인지 알기가 어렵게 됩니다.
이 현상을Props drilling
이라고 부르며 이 현상은 리액트 프로젝트의 유지보수를 어렵게 만들어 줍니다. 이러한 Props drilling 현상을 해결하기 위해서 등장한 것이Redux
상태 관리 라이브러리입니다.
위 설명대로 state는 부모 -> 자식
컴포넌트를 거치면서 전달됩니다.
만약 부모 컴포넌트에 있던 state를 자식의 자식의 자식의 자식의(...) 컴포넌트에서 사용하고 싶다면 어떻게 될까요?
해당 state는 자식의 자식의 자식 컴포넌트에 전달되면서 거치게 됩니다. 자손 컴포넌트들에서 해당 state를 쓰건말건, 오로지 전달하기 위해 사용됩니다. 상당히 불필요하고, 번거로운 작업이란걸 알 수 있습니다.
그래서 이러한 현상을 개선하고자 어떤 컴포넌트에서도 해당 state를 접근할 수 있도록 전역 상태 관리
가 필요해지고, 그에 따른 다양한 라이브러리들이 등장하게 되었습니다.
오늘 소개할 라이브러리인 Context API
는 전역 상태 관리 API입니다.
Redux
는 전역 상태 관리와 함께 더 많은 작업들을 제공합니다. 즉, 라이브러리가 더 무겁기 때문에 간단한 전역 상태 관리만을 할 것이라면Context API
를 사용하고, 큰 프로젝트의 경우엔Redux
를 채택하는 것이 좋은 선택이라고 할 수 있습니다.
Context API
는 우선적으로 3가지의 API 개념만 알면 바로 적용이 가능합니다.
context
는 컴포넌트가 전역 상태를 공유하기 위해 사용되는 개념입니다. 즉, 전역적으로 사용되는 state라고 생각하시면 편합니다. (전역 상태 = context)
createContext()
는 context 객체를 생성하는 메소드입니다.
const myContext = React.createContext(default);
이때, 인자로 default값을 설정할 수 있습니다. 이 값은 context를 사용할 때 값이 따로 지정되지 않은 경우에 설정되는 값입니다.
context를 설정하면 Provider
라는 컴포넌트가 들어있게 됩니다.
Provider
는 context를 하위 컴포넌트에 전달하는 역할을 합니다. 전달하는 방법은 단순히 context를 사용할 컴포넌트를 Provider
로 감싸면 됩니다.
그리고 우리는 Provider
의 value
를 통해서 context의 값에 접근이 가능해집니다.
<myContext.Provider value={value}>
<하위 컴포넌트1/>
<하위 컴포넌트2/>
<하위 컴포넌트3/>
</myContext.Provider>
Provider
는 중첩이 가능합니다. 이때, 더 하위의 Provider
가 높은 우선순위를 갖습니다.
Consumer
는 context의 변경을 감지하는 컴포넌트입니다. 함수를 통해 컴포넌트를 렌더링합니다.
<myContext.Consumer>
{value => (
//렌더링될 컴포넌트
)}
</myContext.Consumer>
Consumer
의 함수가 갖는 context값은 가장 가까이에 있는 Provider
의 context값을 적용 받습니다. (없으면 createContext의 default값)