Context API에 대해 알아보자

Context API가 무엇인가?

context는 리액트에서 컴포넌트끼리 어떠한 값을 공유하는 기능이다.

보통 전역적(global)로 사용되지만, 꼭 전역적으로 사용할 필요는 없다.

Context API를 왜 사용하는가?

React에서 컴포넌트에서 값을 props로 넘겨주면 생기는 props drill현상이 있다.

import React from 'react';

// 최상위 컴포넌트
function App() {
  const username = 'johndoe';  // 사용자 이름을 상태로 관리하거나 props로 받을 수 있습니다.

  return (
    <div>
      <h1>Level 1</h1>
      <LevelTwo username={username} />
    </div>
  );
}

export default App;

// 두 번째 컴포넌트
function LevelTwo({ username }) {
  return (
    <div>
      <h2>Level 2</h2>
      <LevelThree username={username} />
    </div>
  );
}

// 세 번째 컴포넌트
function LevelThree({ username }) {
  return (
    <div>
      <h3>Level 3</h3>
      <LevelFour username={username} />
    </div>
  );
}

// 네 번째 컴포넌트
function LevelFour({ username }) {
  return (
    <div>
      <h4>Level 4</h4>
      <LevelFive username={username} />
    </div>
  );
}

// 최하위 컴포넌트
function LevelFive({ username }) {
  return <div>Level 5: {username}</div>;
}

이런 방식의 코드작성은 다음과 같은 문제를 발생시킨다.

• 코드 가독성이 떨어진다
• 코드의 유지보수가 어렵다
• 컴포넌트의 재사용성 감소
• 불필요한 리렌더링 발생
• 복잡도 결합도 증가

이러한 문제들이 발생하기 때문에 Context API 라는게 존재한다.

Context API는 어떻게 사용하는가?

NewContextProvider

"use client";

import { createContext, useState } from "react";

// context api에 값들의 타입을 정의
interface ThemeContextType {
  theme: string;
  ChangeTheme: () => void;
}

// context api 선언
export const ThemeContext = createContext<ThemeContextType | undefined>(undefined);

// Provider 을 통해 별도로 관리
export const NewContextProvider = ({ children }: { children: React.ReactNode }) => {
  const [theme, setTheme] = useState("dark");

  const ChangeTheme = () => {
    setTheme(theme === "dark" ? "light" : "dark");
  };

  return <ThemeContext.Provider value={{ theme, ChangeTheme }}>{children}</ThemeContext.Provider>;
};

page

import { NewContextProvider } from "./components/NewContextProvider";
import SampleButton from "./components/SampleButton";

const ContextApi = () => {
  return (
    <NewContextProvider>
      <SampleButton />
    </NewContextProvider>
  );
};

export default ContextApi;

SampleButton

"use client";

import { useContext } from "react";
import { ThemeContext } from "./NewContextProvider";
import styles from "./sampleButton.module.css";

const SampleButton = () => {
  const context = useContext(ThemeContext);

  if (!context) {
    return <div>Theme context not available</div>;
  }

  const { theme, ChangeTheme } = context;

  return (
    <div className={styles.box} style={theme === "dark" ? { background: "black" } : { background: "white" }}>
      <button className={styles.button} onClick={ChangeTheme}>
        button
      </button>
    </div>
  );
};

export default SampleButton;

sampleButton.module.css

.box {
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.button {
  width: 100px;
  height: 100px;
}

전역을 관리하는 Redux, Recoil 과의 차이

1. Context API

• 목적과 사용법: React에서 기본적으로 제공하는 Context API는 컴포넌트 트리를 통해 데이터를 "전달"하는 것을 목적으로 합니다. 주로 테마, 로케일 설정, UI 관련 상태 등 비교적 정적인 데이터를 컴포넌트 간에 공유할 때 사용됩니다.
• 장점: 별도의 라이브러리 설치 없이 사용할 수 있으며, 간단한 전역 상태 관리에 적합합니다.
• 단점: 대규모 상태 관리에는 적합하지 않으며, Context를 사용할 때 컴포넌트의 리렌더링 최적화가 필요할 수 있습니다.

2. Redux

• 목적과 사용법: Redux는 예측 가능한 상태 컨테이너로, 애플리케이션의 상태를 중앙에서 관리하는 데 초점을 맞춥니다. Redux는 'actions'와 'reducers'를 사용하여 애플리케이션 상태의 업데이트 로직을 구성합니다.
• 장점: 큰 규모의 애플리케이션에 적합하며, 시간 여행 디버깅, 상태 변경 로그, 중앙 집중식 상태 관리 등 강력한 기능을 제공합니다.
• 단점: 보일러플레이트 코드가 많고, 초기 설정이 복잡할 수 있습니다. 상태 업데이트 로직이 집중적으로 관리되므로 복잡도가 증가할 수 있습니다.

3. Recoil

• 목적과 사용법: Recoil은 React의 기능과 더 잘 통합되는 것을 목표로 하는 상태 관리 라이브러리입니다. 'atoms'과 'selectors'를 중심으로 구축되어, 각 컴포넌트가 필요한 상태에 대해서만 구독하도록 설계되었습니다.
• 장점: 컴포넌트가 필요한 데이터에 대해서만 구독하므로 불필요한 리렌더링을 줄일 수 있습니다. React의 함수형 컴포넌트와 훅에 잘 맞는 설계를 가지고 있습니다.
• 단점: 아직은 새롭고, 다소 실험적인 라이브러리이므로 아직 널리 채택되지 않았습니다. 기존에 잘 정립된 라이브러리들에 비해 커뮤니티 지원이 상대적으로 부족할 수 있습니다.