[리액트] Context API란?

안녕하세요! 오늘은 리액트에서 많은 개발자들이 사용하고 있는 Context API에 대해 이야기해보려고 합니다. 리액트 Context API는 전역 상태 관리를 효과적으로 처리할 수 있는 강력한 도구로, 코드의 재사용성과 유지보수성을 향상시킬 수 있습니다. 이번 포스팅에서는 Context API의 기본 개념과 사용법에 대해 알아보고, 실제로 어떻게 활용할 수 있는지 살펴보겠습니다.

Context API란
리액트에서는 컴포넌트 간에 데이터를 전달하거나 상태를 공유해야 할 때 props를 사용합니다. 하지만 컴포넌트 구조가 복잡해지고 데이터가 여러 단계로 전달되어야 할 때 props를 통한 전달은 번거로워질 수 있습니다. 이런 상황에서 Context API는 전역적으로 상태를 관리하고 필요한 컴포넌트에 손쉽게 전달할 수 있는 방법을 제공합니다. 이를 통해 컴포넌트 간의 데이터 흐름을 더욱 간편하고 유지보수하기 쉽게 만들 수 있습니다.

Context API 사용법
Context API를 사용하기 위해서는 먼저 createContext() 함수를 사용하여 새로운 context를 생성해야 합니다. 이후에 Provider 컴포넌트를 사용하여 해당 context를 전달하고자 하는 컴포넌트를 감싸줍니다. 그리고 Consumer 컴포넌트를 사용하여 필요한 값을 가져올 수 있습니다. 이때 Provider를 통해 전달한 값은 Consumer에서 받아와 사용할 수 있으며, 컴포넌트 트리의 어느 곳에서든 접근 가능합니다. 이러한 구조를 통해 복잡한 컴포넌트 계층에서도 특정 값에 쉽게 접근할 수 있습니다.

코드 재사용성 향상
Context API를 사용하면 코드의 재사용성을 높일 수 있습니다. 예를 들어, 테마를 변경하는 기능이 있는 경우 모든 컴포넌트에서 해당 테마 값을 사용해야 합니다. Context API를 활용하면 테마 값을 Provider를 통해 전역으로 관리하고, 필요한 컴포넌트에서 Consumer를 통해 테마 값을 받아와 사용할 수 있습니다. 이렇게 하면 중복된 코드를 피하고,
 테마 관련 로직을 한 곳에서만 관리할 수 있어 코드의 유지보수성이 향상됩니다.

주의사항과 최적화
Context API를 사용하면 편리하게 상태를 전달하고 공유할 수 있지만, 과도한 사용은 성능 저하를 가져올 수 있습니다. Context 값이 변경될 때마다 해당 context를 구독하는 모든 컴포넌트가 리렌더링되기 때문입니다. 따라서, 큰 규모의 애플리케이션에서는 신중하게 Context API를 사용해야 합니다. 필요한 컴포넌트에만 Context를 적용하고, 깊은 컴포넌트 트리에서는 필요한 값을 전달해 주는 것이 좋습니다.

 

  예시코드 

1.Context 생성 및 Provider 설정 방법

// UserContext.js

import React from 'react';

// createContext() 함수를 사용하여 새로운 context를 생성합니다.
const UserContext = React.createContext();

// 사용자 정보를 제공하기 위한 Provider 컴포넌트를 생성합니다.
const UserProvider = ({ children }) => {
  // Provider 컴포넌트 내부에서 필요한 상태를 관리할 수 있습니다.
  const [user, setUser] = React.useState({ name: '', email: '' });

  // user 값을 제공합니다.
  return (
    <UserContext.Provider value={{ user, setUser }}>
      {children}
    </UserContext.Provider>
  );
};

export { UserContext, UserProvider };

2.Consumer를 통한 값 사용

// Profile.js

import React from 'react';
import { UserContext } from './UserContext';

const Profile = () => {
  // UserContext.Consumer를 사용하여 user 값을 가져옵니다.
  return (
    <UserContext.Consumer>
      {({ user }) => (
        <div className="profile">
          <h2>Profile</h2>
          <p>Name: {user.name}</p>
          <p>Email: {user.email}</p>
        </div>
      )}
    </UserContext.Consumer>
  );
};

export default Profile;

3.Provicer로 값 전달하기

// App.js

import React from 'react';
import Profile from './Profile';
import { UserProvider } from './UserContext';

const App = () => {
  // Provider로 감싸진 컴포넌트들은 user 값을 사용할 수 있습니다.
  return (
    <UserProvider>
      <Profile />
    </UserProvider>
  );
};

export default App;

이 예시 코드에서는 사용자 정보를 전역으로 관리하기 위해 Context API를 사용하였습니다. UserContext.js 파일에서는 createContext() 함수를 사용하여 새로운 context를 생성하고, Provider 컴포넌트를 정의하여 user 상태를 관리합니다. Profile.js 파일에서는 UserContext.Consumer를 사용하여 user 값을 가져와 프로필 정보를 표시합니다. 마지막으로 App.js 파일에서는 UserProvider로 Profile 컴포넌트를 감싸고, user 값을 제공합니다.