Context API

1-blue·2021년 10월 14일
0

React.js

목록 보기
2/9

Context API

리액트에서 기본적으로 제공해 주는 API입니다.
사용하는 이유는 데이터관리(상태관리) 때문입니다.

리액트는 기본적으로 상위에서 props를 이용해서 하위로 데이터를 전달하는 방법을 제공합니다.
그렇게 제공하는 이유는 데이터의 흐름을 일정하게 만들어서 관리 및 에러 잡기를 편하게 하기 위해서 입니다.

근데 이렇게 리액트에서 제공하는 방법으로만 데이터를 관리하다 보면 많은 컴포넌트가 공유해야 할 데이터들이 수많은 props를 타고 내려보내는 방식을 사용해야 하므로 관리하기 더욱 복잡해질 수 있습니다.
이런 문제점을 해결하기위해서 Context API를 제공해줍니다.

간단하게 모든 컴포넌트가 공유할 수 있는 데이터를 만들고 관리하는데 사용하는 API입니다.

정리

1. 간단한 사용법 정리

  • createContext(): 새로운 context를 생성
  • Consumer: context의 데이터를 사용하는데 사용
  • Provider: context의 데이터를 변경시키는데 사용

2. 예시

2.1 선언 예시

// contexts/context.jsx
import { createContext } from "react";

const context = createContext({ color: "red" });

export default context;

2.2 사용 예시

//  /components/ColorBox.jsx (사용할 컴포넌트)
import React from "react";
import context from "../contexts/context.jsx"

const ColorBox = () => {
  return (
  	<context.Consumer>
      {
        // 여기 color값으로 context에서 초기값으로 넣어준 color값이 들어옴
        // 이런식으로 children으로 주는 값을 함수로 사용하는 방법을 "Render Props"라고 함
        ({ color }) => (
			<div 
            	style={{
              	  width: "40px",
                  height: "40px",
                  background: color,
            	}}
              />
        )
      }
    </context.Consumer>
  )
};

export default ColorBox;
//  /components/ColorSelector.jsx (수정할 컴포넌트)
import React from "react";
import context from "../contexts/context.jsx"

const ColorSelector = () => {
  return (
    // value값으로 수정하고, 미선언시 오류
  	<context.Provider value={{ color: "red" }}>
	  <span>수정</span>
    </context.Provider>
  )
};

export default ColorSelector;

2.3 동적으로 수정하는 예시

아래 코드는 책과 완전히 같은 예시이고, 전역적으로 <ColorProvider>로 감싸주고 그 하위에 사용하는 컴포넌트에서 <ColorConsumer>Render Props방식으로 사용하면 됩니다.
그리고 수정이 필요할 땐 actions를 이용해서 수정하면 됩니다.

// /contexts/color.jsx
import { createContext, useState } from "react";

const ColorContext = createContext({
  state: { color: "black", subColor: "red" },
  actions: {
    setColor: () => {},
    setSubColor: () => {},
  },
});

const ColorProvider = ({ children }) => {
  const [color, setColor] = useState("black");
  const [subColor, setSubColor] = useState("red");

  const value = {
    state: { color, subColor },
    actions: { setColor, setSubColor },
  };

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

const { Consumer: ColorConsumer } = ColorContext;

export { ColorProvider, ColorConsumer };

export default ColorContext;

참고서적

마무리

처음 상태 관리를 하려고 redux를 사용했었는데 그때는 상태 관리를 왜 하는지만 이해하고 동작원리는 이해 못 한 채 정해진 형식대로만 코드를 짜는 기계적인 코딩만 했었습니다.
물론 지금이라고 redux가 어떻게 내부적으로 돌아가는지는 정확하게 모르겠지만 context api를 이용해서 구현됐다는 걸 이번 기회에 알게 되었고, 조금 더 원리를 이해하는데 가까워졌다고 생각합니다.

0개의 댓글