컨텍스트 API로 글로벌 상태 관리하기: useContext 훅을 이용한 상태 관리 설명.

작성일 : 2024-06-23

컨텍스트 API로 글로벌 상태 관리하기: useContext 훅을 이용한 상태 관리 설명

React는 상태 관리가 중요한 프레임워크입니다. 전역 상태를 다루기 위해 여러 가지 방법이 있으며, 그 중에서 컨텍스트 API는 간단하고 강력한 도구입니다. 이 글에서는 React의 컨텍스트 API를 사용하여 글로벌 상태를 관리하는 방법과 useContext 훅을 이용한 상태 관리 방법을 설명하겠습니다.

컨텍스트 API란?

React의 컨텍스트 API는 트리 구조의 컴포넌트를 통해 글로벌 상태를 전달할 수 있게 해줍니다. 이를 통해 모든 컴포넌트가 별도의 props drilling 없이 데이터를 공유할 수 있습니다. 컨텍스트는 복잡한 상태를 관리할 때 특히 유용합니다.

컨텍스트 API를 사용하는 주요 단계는 다음과 같습니다:

컨텍스트 생성(React.createContext)
컨텍스트 프로바이더(Context.Provider) 설정
컨텍스트 소비(useContext)하여 상태 접근

컨텍스트 생성

첫 번째 단계는 컨텍스트를 생성하는 것입니다. React.createContext 함수를 사용하여 컨텍스트를 생성합니다.


javascript
import React from 'react';

const MyContext = React.createContext();

이제 MyContext를 통해 글로벌 상태를 관리할 준비가 되었습니다.

컨텍스트 프로바이더 설정

두 번째 단계는 컨텍스트 프로바이더를 설정하는 것입니다. 프로바이더는 컨텍스트를 생성하고 값을 전달합니다. 보통 상위 컴포넌트에서 컨텍스트 프로바이더를 설정합니다.


javascript
import React, { useState } from 'react';
import MyContext from './MyContext';

const MyProvider = ({ children }) => {
  const [state, setState] = useState('Hello, World!');

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

MyProvider 컴포넌트는 MyContext.Provider를 사용하여 상태와 상태 업데이트 함수를 제공합니다. 이제 이 프로바이더를 애플리케이션의 루트에 추가합니다.


javascript
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import MyProvider from './MyProvider';

ReactDOM.render(
  <MyProvider>
    <App />
  </MyProvider>,
  document.getElementById('root')
);

이제 모든 하위 컴포넌트가 MyContext를 통해 전달된 상태에 접근할 수 있습니다.

useContext 훅 사용하여 상태 접근

마지막 단계는 useContext 훅을 사용하여 상태에 접근하는 것입니다. useContext 훅은 컨텍스트를 소비하고, 컨텍스트 프로바이더에서 전달된 값을 반환합니다.


javascript
import React, { useContext } from 'react';
import MyContext from './MyContext';

const MyComponent = () => {
  const { state, setState } = useContext(MyContext);

  return (
    <div>
      <p>{state}</p>
      <button onClick={() => setState('Hello, Context!')}>Change State</button>
    </div>
  );
};

MyComponent는 useContext 훅을 사용하여 MyContext의 상태와 상태 업데이트 함수를 사용합니다. 이렇게 하면 props drilling 없이도 원하는 상태에 쉽게 접근하고 수정할 수 있습니다.

컨텍스트 API의 장단점

장점

글로벌 상태 관리 용이: 상태를 글로벌하게 관리할 수 있어, 함수 컴포넌트나 클래스 컴포넌트 어디에서든지 접근이 가능합니다.
코드 간결화: props drilling 문제를 해결하여 코드가 간결해지고 유지보수가 쉬워집니다.
유연성: 다양한 유형의 상태를 관리할 수 있으며, 필요에 따라 다양한 컨텍스트를 생성하여 사용 가능합니다.

단점

성능 이슈: 컨텍스트 값이 변경될 때마다 모든 소비자 컴포넌트가 다시 렌더링됩니다.
복잡성 증가: 컨텍스트를 남발하면 코드가 복잡해질 수 있습니다. 따라서 적절히 사용해야 합니다.

결론

React의 컨텍스트 API와 useContext 훅을 사용하여 글로벌 상태를 관리하는 방법을 살펴보았습니다. 이를 통해 props drilling 문제를 해결하고 코드의 가독성을 높일 수 있습니다. 하지만 성능 이슈와 복잡성 문제를 고려하여 적절한 상황에서 사용해야 합니다. 컨텍스트 API는 간단한 글로벌 상태 관리에 매우 유용하므로, 프로젝트의 필요에 따라 적극적으로 활용해 보세요.