[React] Context API 개념 및 사용 방법 정리

React Context API란?

컴포넌트에 props를 직접 전달하지 않고 여러 컴포넌트 간에 전역으로 상태를 쉽게 공유하고 관리할 수 있게 해준다.

일반적으로 React에서는 데이터를 위에서 아래로(부모 -> 자식) props를 통해 전달하는데, 실제로 개발을 하다보면 목표 컴포넌트까지 props를 전달해주기 위해 여러 컴포넌트를 통과해야 하는 props drilling 문제가 발생하게 된다.

 

이 문제를 해결하기 위해 전역으로 관리할 수 있게 React에서 만든 것이 바로 Context API이다.

주로 UI 테마(라이트 모드, 다크 모드 등), 언어 설정, 인증된 사용자 등 전역으로 사용될 수 있는 상태를 공유할 때 사용된다.

 

그렇다면 전역 상태 관리를 할 때 사용하면 되는가?

그건 아니다.

전역으로 관리는 할 수 있지만 Provider로 감싼 자식 컴포넌트 모두 리렌더링 되기 때문에 간단한 전역 상태를 관리하거나 테마나 언어 설정처럼 자주 변경되지 않는 데이터일 때 사용하는 것이 좋다.

 

사용 방법

React.createContext

초깃값과 함께 Context 객체를 생성한다.

defaultValue 매개변수는 트리 안에서 Provider를 찾지 못했을 때만 쓰이는 값이다.

const MyContext = React.createContext(defaultValue);

Context.Provider

Context 객체 안에는 Provider라는 컴포넌트가 들어있는데 여기에는 value라는 prop이 필요하다.

Provider에 감싸져 있는 모든 컴포넌트는 이 value 속성 값에 접근할 수 있다.

import { createContext } from 'react'
import Child from './components/Child'

export const MyContext = createContext(defaultValue);

export default function App() {
  return (
    <MyContext.Provider value={전달할 데이터}>
      <Child />
    </MyContext.Provider>
  )
}

 

이 Provider의 value 데이터를 자식 컴포넌트에서 가져오는 방법으로는 Context.Consumer와 useContext 2가지 방법이 있다.

Context.Consumer

Provider의 상태를 구독하고 상태가 변경될 때마다 리렌더링된다.

클래스형 컴포넌트과 함수형 컴포넌트 모두 사용 가능하다.

Consumer의 자식은 함수여야 한다.

import { createContext } from 'react'
import Child from './components/Child'

export const MyContext = createContext(defaultValue);

export default function App() {
  return (
    <MyContext.Provider value={전달할 데이터}>
      <Child />
    </MyContext.Provider>
  )
}

const Child = () => {
  return (
    <MyContext.Consumer>
      {value => <div>{value}</div>}
    </MyContext.Consumer>
  )	
}

useContext

Context의 value를 사용할 수 있게 해주는 React 기본 내장 훅이다.

useContext 훅 사용 시, Context 객체를 인자로 넣어주면 된다.

Consumer보다 더 간편한 방법이다.

import { createContext } from 'react'
import Child from './components/Child'

export const MyContext = createContext(defaultValue);

export default function App() {
  return (
    <MyContext.Provider value={전달할 데이터}>
      <Child />
    </MyContext.Provider>
  )
}

const Child = () => {
  const value = useContext(MyContext);
  return <div>{value}</div>
}

 

 

Context – React