[리액트] Context API

웹 어플리케이션을 개발 하다보면 전역 상태로 관리해야 하는 값들이 꽤 많이 생긴다.

리액트에서 전역 상태를 관리하는 방법 중 하나는 Context API를 사용하는 것이다. 이 API를 이해하려면 먼저 '상태'라는 개념을 이해해야 한다. 상태는 데이터의 현재 상태를 나타내고, 리액트 애플리케이션에서 여러 컴포넌트 간에 상태를 공유하기 위해 Context API를 사용한다.

Context API의 장점

• Prop drilling 문제를 해결한다.
• 전역 상태 관리가 쉽다.
• 코드의 재사용성이 높아진다.

Context API는 리액트에서 전역 상태를 관리하기 위해 사용되어. 기본적으로는 createContext, Context.Provider, 그리고 useContext 훅을 이용해서 사용하게 된다.

createContext

React에서 새로운 컨텍스트를 생성할 때 사용한다. React.createContext()를 호출하면 Provider와 Consumer 컴포넌트가 생성되며, 이를 통해 상태를 공유할 수 있다.

먼저, context를 만든다:

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

const MyContext = createContext(null);

Provider

생성된 컨텍스트에 포함된 Provider 컴포넌트는 상태를 공급하는 역할을 한다. value 속성을 통해 전달하고자 하는 상태를 지정할 수 있다.

Provider를 이용해서 상태를 공유하고 싶은 컴포넌트 트리를 감싼다:

function App() {
  const [state, setState] = useState("I'm a shared state!");

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

useContext 훅

함수형 컴포넌트 내에서 useContext 훅을 사용하면 해당 컨텍스트의 현재 값을 쉽게 사용할 수 있다. 이 훅은 Provider에서 전달한 value 값을 반환한다.

이제 useContext 훅을 이용해서 하위 컴포넌트에서 이 상태를 사용할 수 있다:

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

  return (
    <div>
      <p>{state}</p>
      <button onClick={() => setState("New State")}>Change State</button>
    </div>
  );
}

이게 기본적인 Context API의 사용 방법이다. 상태를 공유할 범위에 따라 여러 개의 Context를 만들 수도 있고, 복잡한 로직을 처리하기 위해 여러 Context를 중첩해서 사용할 수도 있다.

결론

Context API는 리액트에서 전역 상태를 효과적으로 관리할 수 있는 강력한 도구이다. 적절히 사용하면 컴포넌트 간의 상태 공유가 더욱 쉬워진다.