[프론트엔드] REACT Context API [7]

이전 글

• 2022.04.03 - [프론트엔드/React] - [프론트엔드] REACT Context API [6]

 

useContext Hook 사용

 

이번에는 Context 값을 사용할 떄 Consumer -> Hook, static contextType 두가지 방법으로 방식을 변경 해보겠다.

 

 

-  ColorBox.js

Consumer 을 사용했던 컬러박스 컴포넌트를 아래와 같이 useContext  Hook으로 변경한다.

Consumer 보다 코드가 훨신 간결해진다.

 

참고사항

 

Hook은 함수형 안에서만 동작한다. 

클래스형 컴포넌트에서는 동작하지 않는다  따라서  useContext도 클래스형에서 동작하지 않는다. 

 

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

// Consumer 컴포넌트를 통해 색상 조회
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;

 

 

static contextType 사용

클래스형 컴포넌트에서 Context 사용을 좀더 쉽게 하고 싶으면, static contextType 사용을 사용할 수 있다.

SelectColors 컴포넌트를 클래스형으로 변경해보자.

 

 

- Selectcolors.js

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

단점은 클래스에서 Context를 하나만 사용하다는 점이다.

 

Consumer 사용한 코드를 모두 걷어내고 새롭게 선언한 핸들러 함수를 이벤트 호출시에 선언해주자.

 

앞으로 새로운 컴포넌트를 작성할 떄는 클래스보다 함수형을 사용할일이 많기 떄문에

useContext를 사용하는게 좋을 것 같다

.

- 리액트를 다루는 기술 저자의 내용에서 발췌...

 

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

const colors = ["red", "orange", "yellow", "green", "blue", "indigo", "violet"];

class SelectColors extends Component {
  static contextType = ColorContext;

  handleSetColor = (color) => {
    this.context.actions.setColor(color);
  };
  handleSetSubColor = (subcolor) => {
    this.context.actions.setSubcolor(subcolor);
  };

  render() {
    return (
      <div>
        <h2>색상을 선택하세요.</h2>
        <div
          style={{
            display: "flex",
          }}
        >
          {colors.map((color) => (
            <div
              key={color}
              style={{
                background: color,
                width: "24px",
                height: "24px",
                cursor: "pointer",
              }}
              onClick={() => this.handleSetColor(color)}
              onContextMenu={(e) => {
                e.preventDefault(); // 이벤트 동작 방지.
                this.handleSetSubColor(color);
              }}
            />
          ))}
        </div>
        <hr />
      </div>
    );
  }
}

export default SelectColors;

 

최종 결과물

이전에는 컴포넌트간의 상태를 관리할 떄 부모 -> 자식 흐름으로 컴포넌트를 항상 props를 통해서 주고 받아야 했다.

이제는 ContextApi를 사용하여 더 간결하고 이해하기 쉽게 상태를 확인/관리 할 수 있게 되었다.

 

- 글쓴이 의견

프로젝트 컴포넌트 구조가 간단하고 다루는 종류가 많지 않다면 굳이 사용할 필요는 없습니다.

다만 전역적으로  호출되는 API가 많고 컴포넌트가 많은 상황이라면 이제는 Context Api를 사용하는 것은 프로젝트의 관리/유지보수를 위해서  이제는 권장보다 필수로 사용해야 한다고 생각합니다.

 

GitHub - S-YC/ConextAPI: ConextAPI 개념 이해하기