[React] 전역변수와 useContext 비교

useContext는 React에서 컨텍스트(Context) API와 함께 사용되는 훅으로, 컴포넌트 트리 전체에서 데이터를 공유할 수 있게 해줍니다. 이는 전역 변수를 사용하는 것과 유사한 점이 있지만, 더 구조적이고 React 컴포넌트 생명주기에 잘 통합된 방법을 제공합니다.

useContext와 전역 변수의 비교

전역 변수

전역 변수는 애플리케이션의 어디서든 접근할 수 있는 변수입니다.
JavaScript에서는 window 객체에 변수를 추가하여 전역 변수를 만들 수 있습니다.
전역 변수를 사용할 때는 모든 컴포넌트가 직접 접근하고 수정할 수 있어 데이터의 추적과 관리가 어렵습니다.

// 전역 변수 예제
window.globalValue = 42;

function Component() {
  console.log(window.globalValue); // 42
}

useContext

컨텍스트(Context)는 컴포넌트 트리 전체에 데이터를 전달하는 React 기능입니다.
useContext 훅은 컨텍스트에 저장된 데이터를 쉽게 접근할 수 있게 해줍니다.
컨텍스트를 사용하면 필요한 컴포넌트만 데이터를 구독(subscribe)하게 되어 성능과 코드 가독성이 향상됩니다.

import React, { createContext, useContext, useState } from 'react';

// 컨텍스트 생성
const MyContext = createContext();

function ParentComponent() {
  const [value, setValue] = useState(42);

  return (
    <MyContext.Provider value={value}>
      <ChildComponent />
    </MyContext.Provider>
  );
}

function ChildComponent() {
  const value = useContext(MyContext);
  return <p>{value}</p>; // 42 출력
}

useContext의 사용 예제

컨텍스트를 사용하면 컴포넌트 트리의 깊은 곳에서도 prop drilling 없이 데이터를 쉽게 공유할 수 있습니다.

컨텍스트 생성 및 제공:
- 먼저, createContext를 사용하여 컨텍스트를 생성합니다.
- 최상위 컴포넌트에서 Provider를 사용하여 컨텍스트 값을 제공합니다.
컨텍스트 값 사용:
- 하위 컴포넌트에서 useContext 훅을 사용하여 컨텍스트 값을 가져옵니다.

예제: 테마 설정

import React, { createContext, useContext, useState } from 'react';

// 컨텍스트 생성
const ThemeContext = createContext();

function App() {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  return (
    <div>
      <ThemeButton />
    </div>
  );
}

function ThemeButton() {
  const { theme, toggleTheme } = useContext(ThemeContext);
  return (
    <button
      onClick={toggleTheme}
      style={{ background: theme === 'light' ? '#fff' : '#333', color: theme === 'light' ? '#000' : '#fff' }}
    >
      Toggle Theme
    </button>
  );
}

export default App;

주요 차이점

데이터 관리:
- 전역 변수는 애플리케이션 어디서나 접근 가능하지만, 데이터 변경 추적이 어렵고 코드 구조를 해칩니다.
- 컨텍스트는 컴포넌트 트리 내에서 구조화된 방식으로 데이터를 제공하고 소비합니다.
React 통합:
- 전역 변수는 React 생명주기와 잘 통합되지 않아 상태 관리가 어려울 수 있습니다.
- useContext 와 컨텍스트는 React의 상태 관리와 생명주기와 잘 통합되어 효율적인 상태 관리를 제공합니다.
리렌더링:
- 전역 변수를 직접 수정하면 React 컴포넌트가 이를 감지하지 못해 리렌더링 문제가 발생할 수 있습니다.
- 컨텍스트를 사용하면 컨텍스트 값이 변경될 때 이를 구독하고 있는 컴포넌트가 자동으로 리렌더링됩니다.

useContext 와 컨텍스트 API는 전역 변수를 사용하는 것과 유사하지만, 더 구조적이고 관리하기 쉬운 방법으로 데이터를 공유할 수 있게 해줍니다. React 애플리케이션에서 상태와 데이터를 효율적으로 관리하기 위해 useContext 를 사용하는 것이 좋습니다.

개발