[React] Context API의 개념 및 사용법

Janet·2023년 7월 20일
React
10

React

목록 보기
22/26
post-custom-banner

React - Context API

Context API란?

  • Context API는 React version 16부터 사용 가능한 리액트의 내장 API이다.
  • 앱에서 컴포넌트에게 props를 사용하지 않고 필요한 데이터(state)를 쉽게 공유할 수 있게 해준다. 따라서 앱의 모든 컴포넌트에서 사용할 수 있는 데이터(state)를 전달할 때 유용하다.

Props가 아닌 Context API를 이용해야 하는 상황은 어떤 경우일까?

  • 리액트에서는 부모 컴포넌트에서 자식 컴포넌트에게 props를 통해 데이터를 전달한다. 하지만 중간에 여러 컴포넌트를 거쳐야 하거나 앱의 여러 컴포넌트에서 동일한 데이터를 필요로 하는 경우에는 props로만 해결하기에는 불편하다. 계속 props로 넘겨줘야 하는 prop drilling을 해야만 하기 때문이다. (cf. Props drilling: 중첩된 여러 계층의 컴포넌트들에게 props를 전달해 주는 것)
  • Context API를 사용하면 그런 부분을 해결할 수 있다. 간혹 데이터(state)가 필요한 컴포넌트와 부모 컴포넌트 사이에 낀 중간 컴포넌트가 존재할 때가 있는데, Context API를 이용하여 이러한 중간 컴포넌트를 건너뛰고 바로 대상 컴포넌트로 데이터를 전달할 수 있다. 즉, 깊이 여부와 무관하게 데이터가 필요한 컴포넌트에서만 불러다가 사용할 수 있는 것이다.

Context API는 주로 어디에 사용할까?

  • Context API를 통해 전달하는 데이터의 종류
    • 테마 데이터 (다크 모드, 라이트 모드)
    • 사용자 데이터 (현재 인증된 사용자)
    • 언어 혹은 지역 데이터
  • Context API는 자주 업데이트할 필요가 없는 데이터에 사용한다.
    • Context API에서 State값을 변경하면, Provider로 감싼 모든 자식 컴포넌트들이 리렌더링되므로 전역 상태 관리를 위한 도구가 아닌, 데이터를 쉽게 전달하고 공유하기 위한 목적으로 사용하는 것이 적합하다.
    • 따라서 Context는 리액트에서 컴포넌트를 위한 전역 변수의 개념으로 생각하면 된다.

Context API 사용 방법

  1. createContext 메서드를 사용하여 context 생성한다.
  2. 생성한 context를 대상 컴포넌트에 값을 내려주기 위해서 Provider로 대상 컴포넌트를 감싼다.
  3. Provider의 프로퍼티인 value에 전달할 데이터를 넣는다.
  4. Provider의 value에 담은 데이터를 전달 할 때는, 2가지 방식으로 전달이 가능하다. Consumer 컴포넌트 또는 useContext라는 훅을 이용하는 법이다.

4-1. 기본 예제 코드 - Consumer 컴포넌트를 사용하는 방법

import { createContext } from ‘react’;

export const themeContext = createContext(전달할 데이터의 초기값);
export default function App() {
  return (
    <themeContext.Provider value={전달할 데이터}>
      <Theme />
    </themeContext.Provider>
  )
}

function Theme() {
  return (
    <themeContext.Consumer>
      {value => <div>{value}</div>}
    </themeContext.Consumer>
  )	
}

4-2. 기본 예제 코드 - useContext() Hook을 사용하는 방법
(리액트 hook이 도입된 16.8 버전부터 사용 가능하게 된 방법)

import { createContext, useContext } from ‘react’;

export const themeContext = createContext(전달할 데이터의 초기값);
export default function App() {
  return (
    <themeContext.Provider value={전달 데이터}>
      <Theme />
    </themeContext.Provider>
  )
}

function Theme() {
  const theme = useContext(themeContext);
  return <div>{theme}</div> // Provider에서 value로 전달한 데이터 출력
}

예제 코드

import React, { createContext, useContext } from 'react';
import './style.css';
const themeDefault = { border: '10px solid red' };
const themeContext = createContext(themeDefault);
export default function App() {
  const theme = useContext(themeContext);
  return (
    <themeContext.Provider value={{ border: '10px solid blue' }}>
      <div className="root" style={theme}>
        <h1>Hello World</h1>
        <Sub1 />
      </div>
    </themeContext.Provider>
  );
}

function Sub1() {
  const theme = useContext(themeContext);
  return (
    <themeContext.Provider value={{ border: '10px solid green' }}>
      <div style={theme}>
        <h1>Sub1</h1>
        <Sub2 />
      </div>
    </themeContext.Provider>
  );
}

function Sub2() {
  const theme = useContext(themeContext);
  return (
    <div style={theme}>
      <h1>Sub2</h1>
      <Sub3 />
    </div>
  );
}

function Sub3() {
  const theme = useContext(themeContext);
  return (
    <div style={theme}>
      <h1>Sub3</h1>
    </div>
  );
}

Reference.

profile
Janet
😸
다음 포스트

[React] Fragment

post-custom-banner

0개의 댓글