[React] Context API

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

리액트 관련 라이브러리에서도 많이 사용되고 있으며,

리덕스, 리액트 라우터, styled-components 등의 라이브러리는 Context AP를 기반으로 구현되어 있음.

 

리액트는 컴포넌트 간에 데이터를 props로 전달하기 때문에 컴포넌트 여기저기서 필요한 데이터가 있을 때는 주로 최상위 컴포넌트인 App의 state에 넣어서 관리

 

여기서 state와 props를 다시 정리하자면!

state는 함수 내에 선언된 변수처럼, 컴포넌트 내부에서 바뀔 수 있음!

state를 바꿀 땐? setState함수를 사용하여 값을 바꾼다! 

props는 상위컴포넌트 데이터를 하위컴포넌트가 사용할 때 쓰인다! 읽기만 가능!! 

 

 

contexts/color.js

import {createContext} from 'react'

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

export default ColorContext;

ColorContext라는 변수에 검정색으로 context를 만들었다.

 

components/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;

가로 세로 64px인 정사각형을 만들건데,

이 정사각형의 배경 색은 ColorContext 안에 들어있는 Consumer라는 컴포넌트를 통해 색상을 조회할 것임.

즉, 내가 만든 컴포넌트 명에 Consumer라는 컴포넌트가 context안에 포함된 것임!

 

App.js

import React from "react";
import ColorBox from "./components/ColorBox";

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

App.js에는 ColorBox만 출력해줘도 상관없다.

context파일은 이미 ColorBox에서 사용하여, 색깔을 입혀줬기 때문!

 

 

Provider

Context의 value값을 변경하고 싶을 때 사용한다.

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

const App = () => {
  return (
    <ColorContext.Provider value={{ color: "red" }}>
      <div>
        <ColorBox />
      </div>
    </ColorContext.Provider>
  );
};
export default App;

이렇게하면, 빨간색의 정사각형이 화면에 나올것이다.

주의할 점은!

Provider는 valuer를 꼭 명시해야 한다.