[React] 10. Context API 사용해보기

Context API 란,

> 전역적(global)인 데이터를 공유할 수 있도록 고안된 방법입니다.

> 로그인 정보 또는 웹 사이트 내에 사용자 설정 파일, 테마, 언어 등을 컴포넌트 간 공유 데이터에 사용됩니다.

> redux, react-router,styled-components와 같은 라이브러리들도 Context API기반으로 구현되었습니다.

> 세가지 주요 개념 createContext, Provider, Consumer가 있습니다.

> Context를 사용하면 컴포넌트 재사용이 어려워짐으로 꼭 필요할 때에만 사용해야 합니다.

 

Context API 사용하기 전에! 

컴포넌트는 props를 통해 데이터를 전달합니다.

하지만 여러 컴포넌트들에게 전달할 props가 존재할 경우 이과정은 매우 번거로워지며, 애플리케이션의 유지보수성 낮아질 수 있습니다. 그렇기 때문에 redux와 mobx같은 라이브러리를 사용하여 데이터 상태 관리를 하였습니다.

이 방법외에도 아래와 같이 Context API를 이용하여 글로벌한 상태 관리를 할 수 있습니다.

 

Context API 3가지 주요 개념!

React.createContext(defaultValue)

> context 객체를 만들때 사용하는 함수입니다.

> createContext함수를 호출하면  Provider와 Consumer 컴포넌트를 반환합니다.

> defaultValue는 초기값을 말합니다.(Provider를 사용하지 않았을 때 적용될 값)

Context.Provider

> context의 value를 변경하는 역할을 합니다.

> Provider를 사용할 때에는 value를 꼭 명시해주어야만 동작함으로 주의합니다.

> 전달받는 컴포넌트의 수는 제한이 없습니다.

Context.Consumer

> context 변화를 구독하는 컴포넌트를 말합니다.

> 설정한 값을 불러와야 할 때 사용합니다.

 

Context API 적용하기!

예제 01. createContext, Consumer 사용

 먼저, 다음과 같이 createContext를 사용하여 context를 만들어 줍니다. 기본 색상으로 green을 지정해주었습니다.

// Color.js
import { createContext } from "react";

const ColorContext = createContext({ color: "green" });

export default ColorContext;

 

그리고 consumer을 사용하여 ColorContext에 안에 있는 색상을 조회합니다.

// colorBox.js
import React from "react";
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;

 

다음과 같이 코드를 실행하여 주면 아래와 같은 결과 화면을 볼 수 있습니다.

// App.js
import React from "react";
import ColorBox from "./ColorBox";
const App = () => {
  return (
    <div>
      <ColorBox />
    </div>
  );
};

export default App;

 

[예제1] 실행결과

 

예제 02. Provider 사용

위의 코드 중 App.js에 provider를 추가하여 ColorBox의 색상을 변경할 수 있습니다.

// App.js
import React from "react";
import ColorBox from "./ColorBox";
import ColorContext from "./Color";


const App = () => {

    return (
        <ColorContext.Provider value = {{color : 'red'}}>
        <div>
            <ColorBox/>
        </div>
        </ColorContext.Provider>
    );
};

export default App;

 

[예제02] 실행결과

 

예제 03. 동적 Context 사용

context의 value에는 상태 값이 아닌 함수도 전달이 가능합니다.

// Color.js
import { createContext, useState } from "react";
import React from "react";
const ColorContext = createContext({
  state: { color: "yellow" },
  actions: {
    setColor: () => {},
  }
});

const ColorProvider = ({ children }) => {
  
  const [color, setColor] = useState("green");
  const value = {
    state: { color },
    actions: { setColor }
  };

  return (
    <ColorContext.Provider value={value}>{children}</ColorContext.Provider>
  );
};

const { Consumer: ColorConsumer } = ColorContext;

export { ColorProvider, ColorConsumer };

// ColorBox.js
import React from 'react';
import { ColorConsumer } from './Color';

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


export default ColorBox;