[React] Context API 란? (useContext, 전역상태 관리)

목차

1. Context API 란?

2. Context API를 사용하는 이유?

3. 사용방법 및 실행 예제

 

 

1. Context API 란?

React Context는 Component 트리 전체에 props를 전달하지 않고도 Component 데이터를 제공하는 방법이다.

Context를 사용하면 props를 사용하지 않고도 상태변수에 접근이 가능하다.

 

2. Context API 를 사용하는 이유

리액트에서 데이터는 부모 컴포넌트에서 자식 컴포넌트로 단방향으로 흐른다. 그러기 위해서 우리는 지금까지 props를 사용하여 부모 컴포넌트에서 직계 자식 컴포넌트로 데이터를 전달했다. 하지만 props로 상태를 전달하면 계속적으로 중간 컴포넌트를 거쳐야하는 불편함이 있다. (이러한 것을 'Prop Drilling' 이라 한다.) 이것을 해결하기 위해 '전역상태'를 사용한다. 

 

Context API 를 사용하기 전/후

 

위에 그림은 리액트에서 전역상태를 관리할 때와 하지 않을 때의 차이를 나타낸 것이다. 전역적으로 관리하지 않았을 때는 중간 컴포넌트를 다 거쳐야하지만 전역상태를 관리하게 되면 오른쪽 그림과 같이 필요한 컴포넌트에서 사용할 수 있다. 이런 전역상태를 사용할 때는 보통 모든 컴포넌트에 데이터가 필요로 할 때 사용한다.

페이지 전체에 기능이 필요한 것들이 있다. 예를 들어 우리가 흔히 쓰는 '다크모드'와 '로그인 상태' 관리들이 있다. 이러한 기능들을 사용할 때 전역상태관리를 사용하면 좀 더 효율적일 것이다.

 

3. 사용방법 및 실행 예제

(App.jsx 는 생략함)

 

Context.jsx

import { useState, createContext } from 'react';
import A from './A';

// context 객체를 생성
// Store 전역상태를 관리할 인스턴스
export const Store = createContext();

export const Context = () => {
  const [login, setLogin] = useState(false);
  
  const obj = {
    login, setLogin
  }
  
  return (
    <Store.Provider value={obj}>
      <A></A>
    </Store>
  );
};

 

A.jsx

import React from 'react';
import B from './B';

const A = () => {
  return (
    <div>
      <B></B>
    </div>
  );
};

 

B.jsx

import React, { useContext } from 'react';
import C from './C';
import { Store } from './Context';

const B = () => {
  // 전역상태를 참조
  const {login, setLogin} = useContext(Store);
  
  return (
    <div>
      <button onClick={() => {setLogin(e => !e}}>
        {login ? '로그아웃' : '로그인'}
      </button>
      <C></C>
    </div>
  );
};

 

C.jsx

import React, { useContext } from 'react';
import { Store } from './Context';

const C = () => {
  // 전역상태를 참조
  const {login} = useState(Store);
  
  return (
    <div>
      {login ? '로그인 됐음' : '로그인 안됨'}
    </div>
  );
}

 

실행화면