[리액트를 다루는 기술] Context API

1. Context API를 사용한 전역 상태 관리 흐름 이해하기

기존에는 최상위 컴포넌트에서 여러 컴포넌트를 거쳐 props로 원하는 상태와 함수를 전달했지만,
Context API를 사용하면 Context를 말들어 단 한 번에 원하는 값을 받아와서 사용할 수 있다.

2. Context API 사용법 익히기

  1. 새 Context 만들기

• 새 Context를 만들 때는 createContext 함수를 사용한다
• 파라미터에는 해당 Context의 기본 상태를 지정한다

// contexts/color.js
import { createContext } from 'react';

const ColorContext = createContext({ color: 'black' });

export default ColorContext;

  2. Consumer 사용하기

• Consumer 사이에 중괄호를 열어서 그 안에 함수를 넣어주는 패턴을 Function as a child 혹은 Render Props라고 한다
  → children이 있어야 할 자리에 일반 JSX 혹은 문자열이 아닌 함수를 전달하는 것!

// components/ColorBox.js
import ColorContext from '../contexts/color';

const ColorBox = () => {
  return (
    <ColorContext.Consumer>
      { value => (
        <div
          style={{
            width: '64px',
            height: '64px',
            background: value.color
          }}
        />
      )}
    </ColorContext.Consumer>
  );
};

export default ColorBox;

▼ 해당 Consumer 컴포넌트를 App에서 렌더링 하면, 화면에 검정색 정사각형을 볼 수 있다

// App.js
import ColorBox from './components/ColorBox';

const App = () => {
  return (
    <div>
      <ColorBox />
    </div>
  );
};

export default App;

3. Provider

• Provider를 사용하여 Context의 value를 변경할 수 있다

▼ 하기 코드를 저장하고 나면 화면에 빨간색 정사각형을 볼 수 있다

// App.js
import ColorBox from './components/ColorBox';
import ColorContext from './contexts/color';

const App = () => {
  return (
    {/* <ColorContext.Provider>  -> value를 명시하지 않으면 에러발생!! */}
    <ColorContext.Provider value={{ color: 'red' }}>
      <div>
        <ColorBox />
      </div>
    <ColorContext.Provider>
  );
};

export default App;

• Provider를 사용하지 않았을 때만 createContext 함수에 파라미터로 Context의 기본값을 넣어준다
• Provider를 사용할 때는 Provider의 파라미터에 value를 꼭 명시해 주어야 한다
  → 그렇지 않을 경우 에러 발생!

 

3. 동적 Context 사용하기

• Context의 value에는 상태 값 뿐만 아니라 함수도 전달해 줄 수도 있다

• Tip!
  createContext를 사용할 때 넣어주는 기본값은 실제 Provider의 value에 넣는 객체의 형태와 일치시켜 주는 것이 좋다.
  → ① Context 코드를 볼 때 내부 값이 어떻게 구성되어 있는지 파악하기 쉬움
      ② 실수로 Provider를 상요하지 않았을 때 리액트 애플리케이션에서 에러가 발생하지 않음

4. Consumer 대신 Hook 또는 static contextType 사용하기

• Contexxt에 있는 값을 사용하는 방법 3가지
  1. Consumer
  2. Hook - useContext
     • 함수형 컴포넌트에서 사용가능
     • 리액트에 내장되어있는 Hook
  3. static contextType
     • static contextType을 정의하면, 클래스형 컴포넌트에서 Context를 좀 더 쉽게 사용할 수 있음
     • 클래스 메서드에서도 Context에 넣어둔 함수를 호출할 수 있다는 장정이 있지만,
       한 클래스에서 하나의 Context밖에 사용하지 못한다는 단점도 있다.

5. 정리

▶ 전역적으로 여러 곳에서 사용되는 상태가 있고, 컴포넌트의 개수가 많은 상황이라면 Context API를 사용해보자!

  단순한 전역 상태 관리라면, 굳이 리덕스를 쓰지 않고, Context API로 관리할 수 있다.

  하지만, 리덕스가 가진 여러가지 장점들로 인해 모든 상황에 대해 Context API로 대체하여 사용할 수는 없다.

 

---

참고자료

• 리액트를 다루는 기술 [김민준 저]