[React] Context API

Context API란?

컴포넌트간 공동으로 사용해야할 데이터가 있다면 props를 사용했었다.

props로만 데이터에 전달할 때 깊이가 깊어지면 여러 컴포넌트를 거쳐 받아야해서 불편하고 실수할 가능성이 커진다.

이렇게 리액트 프로젝트 내에서 전역적으로 사용할 데이터가 있을 때 유용한 기능이 Context API이다.

리덕스, 리액트 라우터, styled-components 등의 리액트 라이브러리들도 Context API 기반으로 구현되어 있다.

 

기존에는 최상위 컴포넌트에서 여러 컴포넌트를 거쳐 props로 원하는 상태와 함수를 전달했지만, 

Context API를 사용하면 Context를 만들어 단 한번에 원하는 값을 받아와서 사용할 수 있다.

 

Context API 사용법

1. 새 Context 만들기

src 디렉토리 아래에 contexts 디렉토리를 만든다.

그 안에 파일을 만든다.

새로운 Context를 만들기 위해 createContext 함수를 사용한다.

파라미터는 디폴트가 될 값으로 지정한다.

import { createContext } from 'react';

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

export default TestContext;

 

2. Consumer 사용하기

Consumer라는 컴포넌트를 통해 값을 조회합니다.

import { TestContext } from 'react';

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

export default TestBox;

 

3. Provider

Context 객체 안에는 Provider라는 컴포넌트가 들어있다.

컴포넌트간에 공유하고자 하는 값을 value 라는 Props로 설정하면 자식 컴포넌트들에서 해당 값에 바로 접근을 할 수 있다.

function App() {
  return (
    <TestContext.Provider value={{ color: "white" }}>
      <div>
      	<ColorBox />
      </div>
    </TestContext.Provider>
  );
}

Provider를 사용할 때는 value값을 명시해주지 않으면 오류가 난다.

꼭 value값을 명시해주어야 한다.

 

4. Hook 사용하기

import { createContext, useContext } from 'react';
import TestContext from '../contexts/test';

function Message() {
  const value = useContext(TestContext);
  return <div>Received: {value}</div>;
}

원하는 컴포넌트에서 useContext라는 Hook을 사용하여 Context에 넣은 값에 바로 접근할 수 있다.

해당 Hook의 인자에는 createContext로 만든 TestContext를 넣는다.

(Hook은 함수형 컴포넌트에서만 사용 가능하다.)