[React hooks] useContext

React에서 nested한 Children Component에게 props를 전달해야할 경우, props를 계속해서 넘겨줘야하고, 변경 점이 생기면 모두 수정해줘야하는 상황이 발생한다.

이때, React Context를 통해 global로 state를 관리할 수 있다.

1. Context 생성

import { createContext } from "react"

const LangContext = createContext("en")

2. Context 저장하기

다음과 같이 컴포넌트에서 Provider로 감싸주면, 그 하위에 있는 모든 컴포넌트들은 이 React Context에 저장되어 있는 전역 데이터에 접근할 수 있습니다. value 속성값을 지정하지 않을 경우, Context를 생성할 때 넘겼던 디폴트값이 사용됩니다.

기존 앱에서는 모든 하위 컴포넌트에 props로 사용자 언어 설정값인 lang을 넘겨줘었는데, 바뀐 코드에서는 대신에 Provider로 한번 감싸고 value로 이 값을 설정해주고 있습니다. (👍🏽👍🏽👍🏽👍🏽)

import React, { Component } from "react"
import LangContext from "./LangContext"
import Button from "./Button"
import Title from "./Title"
import Message from "./Message"

class App extends Component {
  state = { lang: "en" }

  toggleLang = () => {
    this.setState(({ lang }) => ({
      lang: lang === "en" ? "kr" : "en",
    }))
  }

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

자 그럼 이제 상위 컴포넌트에서 Provider를 이용하여 저장한 전역 데이터를 하위 컴포넌트에서 접근할 수 있습니다. 크게 3가지 방법으로 접근을 할 수 있는데 하나씩 알아보겠습니다.

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>
  )
}

2. useContext로 Context 접근하기

• hooks에서만 사용가능

Button 컴포넌트는 useContext 함수에 LangContext를 넘김으로써 사용자 언어 설정 값을 읽습니다.

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

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

3. contextType으로 Context 접근하기

• class component에서만 사용 가능

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>
      )
  }
}

모든 기능이 그러하듯 React Context는 꼭 본연의 용도에 맞는 상황에서만 사용해야 합니다. 즉, 전역 데이터를 한 곳에서 저장하고 여러 컴포넌트에서 접근하고 싶은 경우가 아니라면 사용을 피해야 합니다. 왜냐하면 React Context를 사용하게 되면 해당 컴포넌트는 해당 Context가 없이는 재사용이 어렵기 때문입니다.

reference