[React JS] React context API로 state 전역적으로 관리하기

React Context API는 React 애플리케이션에서 전역 상태를 효과적으로 관리할 수 있는 강력한 도구이다.
전역적으로 state를 관리한다는 측면에서 react-redux와 같지 않냐 생각할 수 있지만 차이점은 있다.

---

React Context API와 Redux의 차이점

 

1. 용도

• React Context API
• 주로 컴포넌트 간의 상태를 효율적으로 전달하고 관리하기 위한 도구.
• 상태 관리의 범위가 상대적으로 작은 경우에 적합.

• Redux
• 상태 관리 라이브러리로서, 큰 규모의 애플리케이션에서 상태를 효과적으로 관리하고 전역 상태를 중앙에서 제어하기 위한 도구.
• 상태 관리의 범위가 크거나 복잡한 애플리케이션에서 적합.

2. 구조

• React Context API
• React에 내장된 API로, 컴포넌트 트리 안에서 전역적으로 데이터를 공유하는 방법을 제공.
• 'createContext', 'useContext'를 활용하여 구현.

• Redux
• 독립적인 상태 관리 라이브러리로서, 별도의 라이브러리가 필요하며 Redux의 핵심 원칙을 따르는 액션, 리듀서, 스토어로 구성.
• `redux`, `react-redux` 등의 라이브러리를 사용하여 구현.
  
  

3. API의 간결성

• React Context API
• 단순하면서도 가볍고 직관적인 API를 제공.
• 상태 관리에 필요한 최소한의 기능을 제공.

• Redux
• 많은 개념과 기능을 포함한 강력한 API를 제공.
• 복잡한 상태 관리와 미들웨어를 지원하여 확장성이 뛰어남.
  
  

4. 성능

• React Context API
• 작은 규모의 애플리케이션에서는 성능에 큰 영향을 미치지 않음.
• 컴포넌트 트리의 깊이가 깊어질수록 성능이 감소할 수 있음.

• Redux
• 복잡하거나 규모가 큰 애플리케이션에서 효과적인 성능을 유지.
• Immutable state와 효율적인 상태 업데이트를 통해 최적화됨.
  
  

5. 커뮤니티 및 생태계

• React Context API
• React에 기본으로 포함되어 있어 추가적인 설치가 필요하지 않음.
• 상대적으로 가벼우며 적은 추가 라이브러리를 필요로 함.

• Redux
• 강력한 상태 관리 솔루션으로 많은 커뮤니티와 생태계를 보유.
• 다양한 미들웨어, 도구, 확장 프로그램이 존재하여 다양한 상황에 대응 가능.

React Context API는 상대적으로 간단하고 직관적이며 작은 규모의 애플리케이션에 적합하며, React에 기본으로 내장되어 있다.

Redux는 복잡하고 대규모의 상태 관리가 필요한 애플리케이션에 적합하며, 강력한 커뮤니티와 생태계를 가지고 있다. 선택은 애플리케이션의 규모와 요구사항에 따라 달라질 수 있다.

---

이 글에서는 React Context API를 활용하여 전역 상태를 관리하고 컴포넌트 간 데이터 전달을 보다 간편하게 하는 방법을 알아보겠다.

1. Context API 소개

React에서 컴포넌트 간 데이터를 전달하는 가장 일반적인 방법은 props를 사용하는 것입니다. 그러나 컴포넌트 계층이 깊어질수록 props를 계속해서 전달하는 것은 번거로울 수 있다. Context API는 이런 문제를 해결하고 전역 상태를 효율적으로 관리할 수 있도록 도와준다.

2. Context 생성하기

먼저, Context를 생성해보자. createContext 함수를 사용하여 새로운 Context를 만들 수 있다.

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

const MyContext = createContext();

export const useMyContext = () => {
  return useContext(MyContext);
};

export const MyContextProvider = ({ children }) => {
  const [myData, setMyData] = useState(initialData);

  const updateData = (newData) => {
    setMyData(newData);
  };
  
  const context = useMemo(()=>({
    myData,
    updateData
    }),[myData, updateData])

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

3. ContextProvider 제공하기

만든 Context를 어플리케이션 전체에서 사용할 수 있도록 최상위 컴포넌트에서 ContextProvider를 제공해준다.

import React from 'react';
import { MyContextProvider } from './MyContext';

const App = () => {
  return (
    <MyContextProvider>
      <MyComponent />
    </MyContextProvider>
  );
};

export default App;

4. Context 사용하기

이제 어떤 컴포넌트에서든지 해당 Context를 사용할 수 있습니다. useMyContext 훅을 사용하여 해당 컨텍스트의 데이터와 함수에 접근할 수 있습니다.

import React from 'react';
import { useMyContext } from './MyContext';

const MyComponent = () => {
  const { myData, updateData } = useMyContext();

  return (
    <div>
      <p>{myData}</p>
      <button onClick={() => updateData('New Data')}>Update Data</button>
    </div>
  );
};

export default MyComponent;

5. 컴포넌트 간 데이터 전달

Context를 사용하면 중첩된 컴포넌트 간에 props를 계속해서 전달하지 않아도 된다. 필요한 컴포넌트에서 useMyContext 훅을 사용하여 손쉽게 데이터에 접근할 수 있다.이렇게하면 어플리케이션에서 전역 상태를 효과적으로 관리하고 컴포넌트 간의 데이터 전달을 보다 쉽게 할 수 있다. React Context API를 활용하면 컴포넌트 간의 결합도를 낮추고 유지보수성을 높일 수 있다.