상태관리

상태관리는 리액트에서 state(= 상태) 데이터를 효율적으로 관리하는 것을 말합니다.

리액트는 상태(state)의 전달을 단방향(부모 -> 자식)으로만 받기때문에 트리구조로 얽힌 컴포넌트 구조에서는 props들이 어디서부터 내려온 것인지 알기가 어렵게 됩니다.
이 현상을 Props drilling이라고 부르며 이 현상은 리액트 프로젝트의 유지보수를 어렵게 만들어 줍니다. 이러한 Props drilling 현상을 해결하기 위해서 등장한 것이 Redux상태 관리 라이브러리입니다.

위 설명대로 state는 부모 -> 자식 컴포넌트를 거치면서 전달됩니다.

만약 부모 컴포넌트에 있던 state를 자식의 자식의 자식의 자식의(...) 컴포넌트에서 사용하고 싶다면 어떻게 될까요?
해당 state는 자식의 자식의 자식 컴포넌트에 전달되면서 거치게 됩니다. 자손 컴포넌트들에서 해당 state를 쓰건말건, 오로지 전달하기 위해 사용됩니다. 상당히 불필요하고, 번거로운 작업이란걸 알 수 있습니다.

그래서 이러한 현상을 개선하고자 어떤 컴포넌트에서도 해당 state를 접근할 수 있도록 전역 상태 관리가 필요해지고, 그에 따른 다양한 라이브러리들이 등장하게 되었습니다.

---

Context API

오늘 소개할 라이브러리인 Context API는 전역 상태 관리 API입니다.

Redux는 전역 상태 관리와 함께 더 많은 작업들을 제공합니다. 즉, 라이브러리가 더 무겁기 때문에 간단한 전역 상태 관리만을 할 것이라면 Context API를 사용하고, 큰 프로젝트의 경우엔 Redux를 채택하는 것이 좋은 선택이라고 할 수 있습니다.

Context API는 우선적으로 3가지의 API 개념만 알면 바로 적용이 가능합니다.

createContext()

context는 컴포넌트가 전역 상태를 공유하기 위해 사용되는 개념입니다. 즉, 전역적으로 사용되는 state라고 생각하시면 편합니다. (전역 상태 = context)

createContext()는 context 객체를 생성하는 메소드입니다.

const myContext = React.createContext(default);

이때, 인자로 default값을 설정할 수 있습니다. 이 값은 context를 사용할 때 값이 따로 지정되지 않은 경우에 설정되는 값입니다.

Provider

context를 설정하면 Provider라는 컴포넌트가 들어있게 됩니다.

Provider는 context를 하위 컴포넌트에 전달하는 역할을 합니다. 전달하는 방법은 단순히 context를 사용할 컴포넌트를 Provider로 감싸면 됩니다.

그리고 우리는 Provider의 value를 통해서 context의 값에 접근이 가능해집니다.

<myContext.Provider value={value}>
  <하위 컴포넌트1/>
  <하위 컴포넌트2/>
  <하위 컴포넌트3/>
</myContext.Provider>

Provider는 중첩이 가능합니다. 이때, 더 하위의 Provider가 높은 우선순위를 갖습니다.

Consumer

Consumer는 context의 변경을 감지하는 컴포넌트입니다. 함수를 통해 컴포넌트를 렌더링합니다.

<myContext.Consumer>
  {value => (
    //렌더링될 컴포넌트
  )}
</myContext.Consumer>

Consumer의 함수가 갖는 context값은 가장 가까이에 있는 Provider의 context값을 적용 받습니다. (없으면 createContext의 default값)