React에서 useContext 훅 사용법

 

React는 컴포넌트 간 상태를 관리하는 여러 가지 방법을 제공합니다. 그 중에서 useContext 훅은 컴포넌트 트리에서 전역적인 데이터를 손쉽게 공유하고 관리할 수 있게 도와줍니다. 전역 상태 관리에 자주 사용되며, 특히 Context API와 결합되어 훌륭한 성능을 발휘합니다. 이 글에서는 useContext 훅의 개념과 사용법을 상세히 설명하고, 다양한 예제와 함께 실제 애플리케이션에서 어떻게 활용할 수 있는지 알아보겠습니다.

1. useContext 훅의 기본 개념

useContext 훅은 React의 내장 훅 중 하나로, Context API와 결합되어 사용됩니다. Context API는 컴포넌트 트리에서 데이터를 전역적으로 공유할 수 있는 기능을 제공합니다. useContext 훅을 사용하면, 컴포넌트 트리 깊숙한 곳에서 prop drilling 없이 쉽게 데이터를 전달받을 수 있습니다.

1.1. Context와 prop drilling

리액트에서 상태나 데이터를 여러 컴포넌트 간에 공유하려면 주로 props를 사용합니다. 하지만 컴포넌트 트리가 깊어질수록, 상위 컴포넌트에서 하위 컴포넌트로 props를 전달하는 것이 점점 더 복잡해지고 번거로워집니다. 이를 prop drilling이라고 하며, 이 방식은 코드 유지보수에 어려움을 초래할 수 있습니다.

Context API는 이런 문제를 해결합니다. 상위 컴포넌트에서 하위 컴포넌트로 직접 props를 전달하는 대신, 상위 컴포넌트에서 데이터를 Context로 제공하고, 하위 컴포넌트에서는 이 데이터를 useContext 훅을 통해 쉽게 접근할 수 있습니다.

2. useContext 훅 사용법

2.1. Context 생성하기

useContext 훅을 사용하려면 먼저 Context를 생성해야 합니다. React.createContext 함수는 새로운 Context 객체를 생성하는 데 사용됩니다. 이 객체는 Provider와 Consumer를 포함하고 있으며, Provider는 값을 전달하는 역할을 합니다.

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

// 1. Context 생성
const ThemeContext = createContext();

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

  return (
    // 2. Context.Provider로 값 제공
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <Header />
      <Main />
    </ThemeContext.Provider>
  );
};

const Header = () => {
  return <h1>React Context 예시</h1>;
};

const Main = () => {
  return (
    <div>
      <Theme />
      <ChangeThemeButton />
    </div>
  );
};

2.2. useContext로 값 사용하기

Context가 제공하는 값에 접근하려면, useContext 훅을 사용합니다. useContext는 파라미터로 Context 객체를 받아, 해당 Context의 현재 값을 반환합니다.

const Theme = () => {
  const { theme } = useContext(ThemeContext);  // Context에서 값 가져오기

  return (
    <div>
      현재 테마: {theme}
    </div>
  );
};

2.3. 값 변경하기

useContext 훅을 사용하여 상태를 가져오는 것 외에도, Context에서 제공하는 함수를 이용해 상태를 변경할 수도 있습니다. 예제에서는 setTheme 함수를 통해 테마를 변경할 수 있습니다.

const ChangeThemeButton = () => {
  const { theme, setTheme } = useContext(ThemeContext); // 테마와 setTheme 가져오기

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

  return (
    <button onClick={toggleTheme}>
      테마 변경 (현재: {theme})
    </button>
  );
};

위 예제에서는 toggleTheme 함수를 이용해 버튼 클릭 시 테마가 변경되도록 했습니다. useContext 훅을 통해 theme과 setTheme을 직접 가져와서, 상태 관리가 매우 간편해졌습니다.

3. useContext 사용 시 주의사항

3.1. 최상위 컴포넌트에서 Provider로 감싸기

Context를 사용하려면, 반드시 Context의 Provider로 감싼 컴포넌트 트리 내에서 useContext 훅을 사용해야 합니다. Provider는 Context를 사용할 컴포넌트들이 값에 접근할 수 있도록 데이터를 제공합니다.

const App = () => {
  return (
    <ThemeContext.Provider value={{ theme: 'light', setTheme: () => {} }}>
      <YourComponent />
    </ThemeContext.Provider>
  );
};

3.2. 여러 개의 Context 사용하기

애플리케이션에서 여러 개의 Context를 사용하는 경우, 각 Context는 별도의 Provider로 감싸야 합니다. 다만, 이를 하나로 묶어서 사용할 수도 있습니다. 예를 들어, 여러 Context를 하나의 Provider 컴포넌트로 감싸는 방식입니다.

const UserContext = createContext();
const ThemeContext = createContext();

const App = () => {
  const [user, setUser] = useState(null);
  const [theme, setTheme] = useState('light');

  return (
    <UserContext.Provider value={{ user, setUser }}>
      <ThemeContext.Provider value={{ theme, setTheme }}>
        <YourComponent />
      </ThemeContext.Provider>
    </UserContext.Provider>
  );
};

3.3. Context 값 변경 시 리렌더링

useContext 훅은 Context의 값이 변경될 때마다 해당 값을 사용하고 있는 모든 컴포넌트를 리렌더링합니다. 이는 useContext가 상태 관리에 적합하다는 장점이지만, 너무 자주 업데이트되거나 복잡한 상태를 관리하는 경우 성능에 영향을 미칠 수 있습니다. 이 경우, useMemo나 useCallback을 활용하여 성능을 최적화할 수 있습니다.

4. useContext 활용 예제

4.1. 다크 모드 토글 구현하기

다크 모드를 구현할 때 useContext를 활용하면 매우 간단하게 상태를 관리할 수 있습니다. 예제에서는 다크 모드를 적용한 상태에서, 버튼 클릭 시 테마를 변경하는 기능을 구현합니다.

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

const ThemeContext = createContext();

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

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <Header />
      <Main />
    </ThemeContext.Provider>
  );
};

const Header = () => {
  return <h1>다크 모드 예제</h1>;
};

const Main = () => {
  return (
    <div>
      <Theme />
      <ChangeThemeButton />
    </div>
  );
};

const Theme = () => {
  const { theme } = useContext(ThemeContext);
  return <div className={theme}>현재 테마: {theme}</div>;
};

const ChangeThemeButton = () => {
  const { theme, setTheme } = useContext(ThemeContext);

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

  return <button onClick={toggleTheme}>테마 변경</button>;
};

export default App;

위 코드에서는 다크 모드와 라이트 모드를 구현하였으며, useContext 훅을 이용하여 상태 변경과 전달을 간편하게 처리하고 있습니다.

5. 결론

useContext 훅은 React에서 전역 상태를 관리하는 데 매우 유용한 도구입니다. 이를 사용하면 컴포넌트 트리에서 props를 전달하는 번거로움 없이 데이터를 쉽게 공유하고 사용할 수 있습니다. 하지만 불필요한 리렌더링을 피하기 위해서는 useMemo나 useCallback과 함께 사용하는 것이 좋습니다. 이를 통해 애플리케이션의 상태 관리가 더 깔끔하고 효율적으로 개선될 수 있습니다.

이제 useContext를 활용하여 더 깔끔하고 유지보수하기 쉬운 React 애플리케이션을 작성해 보세요!