[React] useContext Hook

색상 선택을 하기 위해 이때까지

Context에 있는 값을 사용할 때, Consumer을 이용하였다.

 

리액트에 내장되어 있는 Hooks중에서 useContext라는 Hook을 사용하여,

함수형 컴포넌트에서 Context를 편하게 사용할 수 있다.

 

 

원래 ColorConsumer를 사용한 코드

import React from "react";
import { ColorConsumer } from "../contexts/color";

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

 

 

useContext를 사용한 코드

import React, { useContext } from "react";
import ColorContext from "../contexts/color";

const ColorBox = () => {
  const { state } = useContext(ColorContext);
  return (
    <>
      <div
        style={{
          width: "64px",
          height: "64px",
          background: state.color,
        }}
      />
      <div
        style={{
          width: "32px",
          height: "32px",
          background: state.subcolor,
        }}
      />
    </>
  );
};
export default ColorBox;

 

useContext를 사용해서 코드가 훨씬 간결해지고,

children함수를 전달하는 Render Props패턴이 불편하다면 useContext Hook을 사용하여 훨씬 편하게 Context값을 조회할 수 있다.

 

Hook은 함수형 컴포넌트에서만 사용이 가능하다!

 

클래스형 컴포넌트에서는? 

-Context를 좀 더 쉽게 사용하고 싶다면 static contextType을 정의하는 방법

 

static contextType을 정의하면 클래스 메서드에서도 Context에 넣어 둔 함수를 호출할 수 있다.

하지만! 한 클래스에서 하나의 Context밖에 사용하지 못하기 때문에

새로운 컴포넌트를 작성할 때 함수형 컴포넌트를 사용하여 useContext를 작성하는 것을 권유.