[리액트] Context는 상태 관리 도구가 아니다?

navyjeongs·2024년 1월 6일

Context API React 리액트

리액트

목록 보기

5/7

프로젝트를 시작하기전 항상 상태 관리 도구를 무엇을 쓸까?를 고민한다.

최근 프로젝트에서는 전역으로 관리할 상태가 거의 없으므로 리액트에서 제공하는 Context API를 사용하기로 했다.

이 때 까지만해도 Context가 상태 관리 도구인줄 알았으나 Context는 상태관리 도구가 아니라 의존성을 주입해주는 역할을 하는 것을 알게되었다.

해당 포스팅에서는 Why React Context is Not a "State Management" Tool를 읽고 왜 Context가 상태 관리 도구가 아닌지 정리한다.
또, Context + useReducer와 redux의 차이와 리액트의 상태 관리 라이브러리(redux, jotai, recoil)가 어떻게 구성되어있는지 간단하게 살펴본다.

상태 관리

상태 관리를 한다고 하기 위해서는 다음의 세 가지 역할을 할 수 있어야한다.

초기값 저장
현재값 읽기
값 업데이트

리액트의 useState와 useReducer는 상태 관리의 예시이다. 두 개의 hook은 아래의 역할을 한다.

hook을 호출해서 초기값을 저장
hook을 호출해서 현재값을 확인
setState혹은 dispatch를 호출하여 값을 업데이트
컴포넌트가 리렌더링 되었으므로 값이 업데이트됨을 확인할 수 있음

redux는?

redux는 현재 값을 getState로 확인할 수 있으며 dispatch를 통해 값을 업데이트할 수 있다.
또, subscribe를 통해 해당 state를 구독하고 있는 컴포넌트에 업데이트가 되었음을 알려줄 수 있으므로 상태 관리툴이다.

Context

이제 상태 관리가 무엇인지 알게되었으니 React의 Context에 대해 알아보자.

공식 문서에 의하면 Context는 필요한 정보를 부모로부터 props로 받을 필요 없이 데이터를 받을 수 있게 해주는 것이라고 나온다.

공식 문서에 Context가 상태 관리를 한다라는 문구가 없는 것을 확인할 수 있다.

단순히 값을 전달하는 역할을 할 뿐이다.

공식문서의 Context Hooks 설명 바로가기

Context 사용해보기

App에서 CountContext를 만들고 Provider로 count, setCount를 전달해보자.
이 때, Provider의 value로 하위 컴포넌트로 전달할 값을 설정할 수 있다.

import { createContext, useState } from "react";
import Child from "./Child";

// Context 생성
export const CountContext = createContext();

function App() {
  const [count, setCount] = useState(0);

  const countState = { count, setCount };

  return (
    <>
      <CountContext.Provider value={countState}>
        <Child />
      </CountContext.Provider>
    </>
  );
}

export default App;

그 후, Child 컴포넌트에서 CountContext를 useContext를 통해 가져와 사용해보자.

import { useContext } from "react";
import { CountContext } from "./App";

function Child() {
  // Context 가져오기
  const { count, setCount } = useContext(CountContext);

  return (
    <div>
      {count}
      <button onClick={() => setCount((prev) => prev + 1)}>+ 1</button>
    </div>
  );
}

export default Child;