[React] Context()알아보고 활용하기

context()에 대해서 정리하는 이유는 많이 보았기에 궁금해서 찾아보다가 너무 유익해서 정리하고자 한다.

context()는 언제 쓰는가

여러 글 봤었는데 유튜브의 영상이 잘 설명되어 있어서 맨아래에 첨부해놓는다.

react로 개발을 하다보면 props를 가져와서 쓰고 싶은 경우가 생긴다. 즉 하위 컴포넌트에서 상위 컴포넌트의 데이터를 가져오고 싶은 것이다.

나의 경우는

https://uhee-12.tistory.com/51

위 글을 보면 알겠지만, navigate와 location을 많이 사용했었다. 또한, redux를 사용하지 않아서 아직은 상태관리에 많은 어려움을 겪고 있다. 그러던 와중 context()를 알게 된 것이다. 위에서도 말한 것 같이 데이터를 전역적으로 사용하고 싶을 때 context()를 쓴다.

Context 저장하기

1) React.createContext() 만들기

Context 를 만들 땐 다음과 같이 React.createContext()라는 함수를 사용한다. 이는

import { createContext } from "react";

const LangContext= createContext();

위처럼 react에 훅으로 되어있으니 이를 가져오고, createContext()로 하여 변수를 설정해준다. ()안에 기본값을 설정할 수 있다. 따로 지정하지 않을 경우 사용되는 값이다.

2) Provider 설정하기

Provider를 통하여 Context의 값을 정할 수 있다. value에 설정해주면 된다.

<LangContext.Provider value={dispatch}>...</LangContext.Provider>

Provider에 의해 감싸진 컴포넌트 중 Context에 저장되어 있는 전역 데이터에 접근할 수 있다. value  속성값을 지정하지 않을 경우, Context를 생성할 때 넘겼던 디폴트값이 사용된다. 즉 provider는 기준이라고 보면 된다. provider로 감싼 컴포넌트 이하에서만 사용이 가능하다.

Context 불러오기

//LangContext.js
import { createContext } from "react";

const LangContext = createContext("en");

export default LangContext;

const { lang } = this.state;
    return (
      <LangContext.Provider value={lang}>
        <Button toggleLang={this.toggleLang} />
        <Title />
        <Message />
      </LangContext.Provider>
    );

이렇게 provider로 감싸준 context가 있다. 이를 불러오도록 해보자. 이 방법에는 세가지가 있다.

1) Consumer로 Context 접근하기

import React from "react";
import LangContext from "./LangContext";

function Title() {
  return (
    <LangContext.Consumer>
      {(lang) => {
        const text = lang === "en" ? "Context" : "컨텍스트";
        return <h1>{text}</h1>;
      }}
    </LangContext.Consumer>
  );
}

createContext()로 저장해놓은 곳을 임포트해온다. 그리고 변수값에 .consumer만 붙이면 사용이 가능하다. render props를 받기 때문에 consumer를 통해 context의 값에 접근할 수 있다.

2) useContext로 Context 접근하기

import React, { useContext } from "react";
import LangContext from "./LangContext";

function Button({ toggleLang }) {
  const lang = useContext(LangContext);
  return <button onClick={toggleLang}>{lang}</button>;
}

이 방법으로 해서 많이 쓴다. react에 훅으로 되어 있어 더 편리하다.

3) contextType으로 Context 접근하기

클래스로 구현된 컴포넌트의 경우에는 contextType을 사용해서 Context에 저장되어 있는 전역 데이터에 접근할 수 있다.

import React, { Component } from "react";
import LangContext from "./LangContext";

class Message extends Component {
  static contextType = LangContext;

  render() {
    const lang = this.context;
    if (lang === "en")
      return (
        <p>
          "Context provides a way to pass data through the component tree
          without having to pass props down manually at every level"
        </p>
      );
    else
      return (
        <p>
          "컨텍스트는 모든 레벨에서 일일이 props를 넘기지 않고도 컴포넌트 트리에
          걸쳐서 데이터를 전달할 수 있는 방법을 제공합니다."
        </p>
      );
  }
}

정리

이렇게 context를 사용하는 이유는 전역적으로 데이터를 사용하기 위함이다. 또한 provider에 넣어준 value값을 전역적으로 사용할 수 있음을 잊지말자