[React]07. Context API 사용

오늘은 Context API가 무엇인지 어떻게 사용하는지 간단히 정리해볼게요!

💚 Context API

전역적인 데이터 공유를 위한 방법
로그인 또는 웹 사이트 내 사용자 설정(테마나 언어등)에 사용
redux, react-router, styled-components 라이브러리 모두 Context API 기반 구현

Context API를 사용하면 컴포넌트의 재사용이 어려움으로 반드시 필요할 때에만 사용해야 합니다.

💛 Context API 필요한 이유

컴포넌트는 props를 통해 데이터를 전달하는데요. props를 전달해야할 컴포넌트가 많아지면 이 과정은 매우 번거롭고 애플리케이션의 유지보수가 낮아질 수 있습니다. 그렇기 때문에 우리는 redux와 mobx와 같은 라이브러리를 사용하여 데이터의 상태관리를 하는데요! ContextAPI를 사용하여도 글로벌한 상태 관리를 할 수 있습니다.

💚 Context API 3가지 주요 개념

Context API를 사용하기 전에 3가지 주요 개념부터 정리해볼께요!

💛 React.createContext(defaultValue)

• context 객체 생성시 사용하는 함수
• createContext함수 호출시 Provider와 Consumer컴포넌트 반환
• defaultValue는 초기값 의미(Provider를 사용하지 않을 때 전달될 값)

💛 Context.Provider

• context의 value를 변경하는 역할
• Provider를 사용할 때에는 📌value 📌명시 필요
• 전달받는 컴포넌트 수 제한 없음

💛Context.Consumer

• context변화를 구독하는 컴포넌트
• 설정한 값을 불러올 때 사용

💚 Context API 사용

context API 사용 예제는 아래 사이트를 보고 하였습니다.

더북:리액트를 다루는 기술

버튼의 색상을 가지고 있는 context를 만들어주고, 다른 컴포넌트에서 버튼의 색상을 불러와서 사용해보도록 할게요!

먼저, context를 만들어줄꺼에요!

import { createContext } from "react";

// createContext()를 사용하여 ColorContext 생성. 초기값은 skyblue설정
const ColorContext = createContext({ color: "skyblue" });

export default ColorContext;

그리고 만들어준ColorContext를 사용할 button컴포넌트를 만들어줍니다.
Consumer객체를 사용해서 적용한 값을 불러올 수 있는데요!

import React from "react";
import ColorContext from "../contexts/color";

const ColorButton = () => {
  return (
    <ColorContext.Consumer>
      {(value) => (
        <button
          style={{
            width: "150px",
            height: "50px",
            background: value.color
          }}
        >
          Button!
        </button>
      )}
    </ColorContext.Consumer>
  );
};

export default ColorButton;

아래처럼 ColorContext에서 설정해준 color값을 가져와 버튼의 배경색으로 적용해줄 수 있습니다.

이번에는 Provider를 사용하여 value를 변경해 주도록 해보겠습니다.

export default function App() {
  return (
      <ColorContext.Provider value={{color:"orange"}}>
        <div>
          <h2>Context API 사용해보기!</h2>
          <ColorButton />
        </div>
      </ColorContext.Provider>
  );
}