React Context: 종합 가이드

React Context는 컴포넌트 트리의 모든 레벨을 통해 명시적으로 props를 전달하지 않고도 컴포넌트 간에 데이터를 공유할 수 있게 해주는 강력한 기능입니다. 특정 하위 트리의 모든 컴포넌트가 특정 값에 접근할 수 있도록 하는 방법을 제공합니다. 이 가이드에서는 React Context를 효과적으로 사용하는 시기와 방법, 그리고 피해야 할 모범 사례와 일반적인 함정에 대해 알아봅니다.

문제 이해하기: Prop Drilling

복잡한 React 애플리케이션에서는 "prop drilling" 문제를 겪을 수 있습니다. 이는 부모 컴포넌트에서 깊게 중첩된 자식 컴포넌트로 데이터를 전달해야 할 때 발생합니다. 이를 위해, 중간 컴포넌트들이 해당 데이터가 필요하지 않더라도 모든 중간 컴포넌트를 통해 데이터를 전달해야 합니다. 이는 다음과 같은 문제를 야기할 수 있습니다:

• 코드의 복잡성 증가: 중간 컴포넌트들이 불필요한 props로 인해 비대해집니다.
• 유지보수의 어려움: prop 하나를 변경하려면 여러 컴포넌트를 수정해야 합니다.
• 가독성 저하: 애플리케이션을 통한 데이터 흐름을 이해하기가 더 어려워집니다.

다음의 간단한 예시를 살펴보겠습니다:

function App() {
  const user = { name: 'Alice', theme: 'dark' };
  return (
    <Layout user={user} />
  );
}

function Layout({ user }) {
  return (
    <Header user={user} />
  );
}

function Header({ user }) {
  return (
    <Navigation user={user} />
  );
}

function Navigation({ user }) {
  return (
    <Profile user={user} />
  );
}

function Profile({ user }) {
  return (
    <p>환영합니다, {user.name}님!
테마: {user.theme}</p>
  );
}

이 예시에서 user 객체는 실제로 Profile 컴포넌트에서만 사용됨에도 불구하고 여러 컴포넌트를 거쳐 전달됩니다. 이것이 바로 prop drilling의 전형적인 사례입니다.

React Context 소개

React Context는 props를 통해 명시적으로 데이터를 전달하지 않고도 하위 트리의 모든 컴포넌트가 데이터에 접근할 수 있도록 하여 prop drilling을 피할 수 있는 방법을 제공합니다. 이는 세 가지 주요 부분으로 구성됩니다:

• Context: 공유하고자 하는 데이터를 담는 컨테이너입니다. React.createContext()를 사용하여 context를 생성합니다.
• Provider: 이 컴포넌트는 context에 데이터를 제공합니다. Provider로 감싸진 모든 컴포넌트는 context 데이터에 접근할 수 있습니다. Provider는 공유하고자 하는 데이터인 value prop을 받습니다.
• Consumer: (레거시, 덜 일반적) 이 컴포넌트는 context를 구독합니다. context 값이 변경될 때마다 Consumer는 다시 렌더링됩니다. Consumer는 렌더 prop 함수를 사용하여 context 값에 접근합니다.
• useContext Hook: (현대적 접근법) 이 hook을 사용하면 함수형 컴포넌트 내에서 직접 context 값에 접근할 수 있습니다.

React Context는 언제 사용해야 할까?

React Context는 React 컴포넌트 트리에서 "전역적"으로 간주되는 데이터를 공유하는 데 특히 유용합니다. 여기에는 다음이 포함될 수 있습니다:

• 테마: 애플리케이션의 테마(예: 라이트 또는 다크 모드)를 모든 컴포넌트에서 공유합니다. 예시: 국제적인 전자상거래 플랫폼은 사용자가 접근성 및 시각적 선호도 향상을 위해 라이트 테마와 다크 테마 간에 전환할 수 있도록 허용할 수 있습니다. Context는 현재 테마를 관리하고 모든 컴포넌트에 제공할 수 있습니다.
• 사용자 인증: 현재 사용자의 인증 상태 및 프로필 정보를 제공합니다. 예시: 글로벌 뉴스 웹사이트는 Context를 사용하여 로그인한 사용자의 데이터(사용자 이름, 선호도 등)를 관리하고 사이트 전체에서 사용할 수 있게 하여 개인화된 콘텐츠와 기능을 활성화할 수 있습니다.
• 언어 설정: 국제화(i18n)를 위해 현재 언어 설정을 공유합니다. 예시: 다국어 애플리케이션은 Context를 사용하여 현재 선택된 언어를 저장할 수 있습니다. 그러면 컴포넌트들은 이 context에 접근하여 올바른 언어로 콘텐츠를 표시합니다.
• API 클라이언트: API 호출이 필요한 컴포넌트에 API 클라이언트 인스턴스를 제공합니다.
• 실험 플래그 (기능 토글): 특정 사용자나 그룹에 대해 기능을 활성화하거나 비활성화합니다. 예시: 국제적인 소프트웨어 회사는 특정 지역의 일부 사용자에게 먼저 새로운 기능을 출시하여 성능을 테스트할 수 있습니다. Context는 이러한 기능 플래그를 적절한 컴포넌트에 제공할 수 있습니다.

중요 고려사항:

• 모든 상태 관리를 대체하지는 않음: Context는 Redux나 Zustand와 같은 본격적인 상태 관리 라이브러리를 대체하는 것이 아닙니다. 진정으로 전역적이고 거의 변경되지 않는 데이터에 Context를 사용하세요. 복잡한 상태 로직과 예측 가능한 상태 업데이트에는 전용 상태 관리 솔루션이 더 적합한 경우가 많습니다. 예시: 애플리케이션이 수많은 항목, 수량 및 계산이 포함된 복잡한 장바구니를 관리해야 하는 경우, Context에만 의존하기보다는 상태 관리 라이브러리가 더 나은 선택일 수 있습니다.
• 리렌더링: context 값이 변경되면 해당 context를 사용하는 모든 컴포넌트가 다시 렌더링됩니다. context가 자주 업데이트되거나 사용하는 컴포넌트가 복잡한 경우 성능에 영향을 줄 수 있습니다. 불필요한 리렌더링을 최소화하도록 context 사용을 최적화하세요. 예시: 자주 업데이트되는 주가를 표시하는 실시간 애플리케이션에서, 주가 context를 구독하는 컴포넌트가 불필요하게 리렌더링되면 성능에 부정적인 영향을 미칠 수 있습니다. 관련 데이터가 변경되지 않았을 때 리렌더링을 방지하기 위해 메모이제이션 기법을 사용하는 것을 고려하세요.

React Context 사용법: 실용적인 예제

prop drilling 예제로 돌아가서 React Context를 사용하여 해결해 보겠습니다.

1. Context 생성하기

먼저, React.createContext()를 사용하여 context를 생성합니다. 이 context는 사용자 데이터를 담게 됩니다.

// UserContext.js
import React from 'react';

const UserContext = React.createContext(null); // 기본값은 null 또는 초기 사용자 객체가 될 수 있습니다

export default UserContext;

2. Provider 생성하기

다음으로, 애플리케이션의 루트(또는 관련 하위 트리)를 UserContext.Provider로 감싸줍니다. user 객체를 value prop으로 Provider에 전달합니다.

// App.js
import React from 'react';
import UserContext from './UserContext';
import Layout from './Layout';

function App() {
  const user = { name: 'Alice', theme: 'dark' };
  return (
    <UserContext.Provider value={user}>
      <Layout />
    </UserContext.Provider>
  );
}

export default App;

3. Context 사용하기

이제 Profile 컴포넌트는 useContext hook을 사용하여 context에서 직접 user 데이터에 접근할 수 있습니다. 더 이상 prop drilling이 필요 없습니다!

// Profile.js
import React, { useContext } from 'react';
import UserContext from './UserContext';

function Profile() {
  const user = useContext(UserContext);

  return (
    <p>환영합니다, {user.name}님!
테마: {user.theme}</p>
  );
}

export default Profile;

중간 컴포넌트들(Layout, Header, Navigation)은 더 이상 user prop을 받을 필요가 없습니다.

// Layout.js, Header.js, Navigation.js
import React from 'react';

function Layout({ children }) {
  return (
    <div>
      <Header />
      <main>{children}</main>
    </div>
  );
}

function Header() {
  return (<Navigation />);
}

function Navigation() {
  return (<Profile />);
}

export default Layout;

고급 사용법 및 모범 사례

1. Context와 useReducer 결합하기

더 복잡한 상태 관리를 위해 React Context와 useReducer hook을 결합할 수 있습니다. 이를 통해 상태 업데이트를 더 예측 가능하고 유지보수하기 쉬운 방식으로 관리할 수 있습니다. context는 상태를 제공하고, reducer는 디스패치된 액션에 따라 상태 전환을 처리합니다.

// ThemeContext.js
import React, { createContext, useReducer } from 'react';

const ThemeContext = createContext();

const initialState = { theme: 'light' };

const themeReducer = (state, action) => {
  switch (action.type) {
    case 'TOGGLE_THEME':
      return { ...state, theme: state.theme === 'light' ? 'dark' : 'light' };
    default:
      return state;
  }
};

function ThemeProvider({ children }) {
  const [state, dispatch] = useReducer(themeReducer, initialState);

  return (
    <ThemeContext.Provider value={{ ...state, dispatch }}>
      {children}
    </ThemeContext.Provider>
  );
}

export { ThemeContext, ThemeProvider };



// ThemeToggle.js
import React, { useContext } from 'react';
import { ThemeContext } from './ThemeContext';

function ThemeToggle() {
  const { theme, dispatch } = useContext(ThemeContext);

  return (
    <button onClick={() => dispatch({ type: 'TOGGLE_THEME' })}>
      테마 전환 (현재: {theme})
    </button>
  );
}

export default ThemeToggle;



// App.js
import React from 'react';
import { ThemeProvider } from './ThemeContext';
import ThemeToggle from './ThemeToggle';

function App() {
  return (
    <ThemeProvider>
      <div>
        <ThemeToggle />
      </div>
    </ThemeProvider>
  );
}

export default App;

2. 다중 Context 사용

관리해야 할 전역 데이터의 종류가 다른 경우, 애플리케이션에서 여러 context를 사용할 수 있습니다. 이는 관심사를 분리하고 코드 구성을 개선하는 데 도움이 됩니다. 예를 들어, 사용자 인증을 위한 UserContext와 애플리케이션 테마 관리를 위한 ThemeContext를 가질 수 있습니다.

3. 성능 최적화

앞서 언급했듯이, context 변경은 이를 사용하는 컴포넌트에서 리렌더링을 유발할 수 있습니다. 성능을 최적화하려면 다음을 고려하세요:

• 메모이제이션: React.memo를 사용하여 컴포넌트가 불필요하게 다시 렌더링되는 것을 방지합니다.
• 안정적인 Context 값: Provider에 전달되는 value prop이 안정적인 참조인지 확인합니다. 값이 매 렌더링마다 새로운 객체나 배열인 경우, 불필요한 리렌더링을 유발합니다.
• 선택적 업데이트: 실제로 변경이 필요할 때만 context 값을 업데이트합니다.

4. Context 접근을 위한 커스텀 Hook 사용

context 값에 접근하고 업데이트하는 로직을 캡슐화하기 위해 커스텀 hook을 만듭니다. 이는 코드 가독성과 유지보수성을 향상시킵니다. 예를 들어:

// useTheme.js
import { useContext } from 'react';
import { ThemeContext } from './ThemeContext';

function useTheme() {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error('useTheme must be used within a ThemeProvider');
  }
  return context;
}

export default useTheme;



// MyComponent.js
import React from 'react';
import useTheme from './useTheme';

function MyComponent() {
  const { theme, dispatch } = useTheme();

  return (
    <div>
      현재 테마: {theme}
      <button onClick={() => dispatch({ type: 'TOGGLE_THEME' })}>
        테마 전환
      </button>
    </div>
  );
}

export default MyComponent;

피해야 할 일반적인 함정

• Context의 남용: 모든 것에 Context를 사용하지 마세요. 진정으로 전역적인 데이터에 가장 적합합니다.
• 복잡한 업데이트: context provider 내에서 직접 복잡한 계산이나 부수 효과를 수행하지 마세요. 이러한 작업은 reducer나 다른 상태 관리 기법을 사용하여 처리하세요.
• 성능 무시: Context를 사용할 때 성능에 미치는 영향을 염두에 두세요. 불필요한 리렌더링을 최소화하도록 코드를 최적화하세요.
• 기본값 미제공: 선택 사항이지만, React.createContext()에 기본값을 제공하면 컴포넌트가 Provider 외부에서 context를 사용하려고 할 때 발생하는 오류를 방지하는 데 도움이 될 수 있습니다.

React Context의 대안

React Context는 유용한 도구이지만 항상 최상의 해결책은 아닙니다. 다음 대안들을 고려해 보세요:

• Prop Drilling (경우에 따라): 데이터가 소수의 컴포넌트에서만 필요한 간단한 경우에는 prop drilling이 Context를 사용하는 것보다 더 간단하고 효율적일 수 있습니다.
• 상태 관리 라이브러리 (Redux, Zustand, MobX): 복잡한 상태 로직을 가진 애플리케이션의 경우, 전용 상태 관리 라이브러리가 더 나은 선택인 경우가 많습니다.
• 컴포넌트 합성: 컴포넌트 합성을 사용하여 더 통제되고 명시적인 방식으로 컴포넌트 트리를 통해 데이터를 전달합니다.

결론

React Context는 prop drilling 없이 컴포넌트 간에 데이터를 공유하기 위한 강력한 기능입니다. 언제 어떻게 효과적으로 사용해야 하는지를 이해하는 것은 유지보수 가능하고 성능이 뛰어난 React 애플리케이션을 구축하는 데 중요합니다. 이 가이드에 설명된 모범 사례를 따르고 일반적인 함정을 피함으로써, React Context를 활용하여 코드를 개선하고 더 나은 사용자 경험을 만들 수 있습니다. Context 사용 여부를 결정하기 전에 특정 요구 사항을 평가하고 대안을 고려하는 것을 잊지 마세요.