[React] Context API에 대해

Context API는 리액트에서 상태를 관리하고 컴포넌트 간에 데이터를 공유하기 위한 공식적인 방법 중 하나다. 

 

이를 통해 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하지 않고도 데이터를 공유할 수 있다. 

 

Context API를 사용하면 전역 상태를 쉽게 관리하고 다양한 컴포넌트 간에 데이터를 공유할 수 있다.

---

Context API의 주요 구성 요소와 작동 방식은 다음과 같다.

 

1. createContext 함수: createContext 함수를 사용하여 새로운 컨텍스트 객체를 생성한다.

이 컨텍스트 객체는 Provider와 Consumer 컴포넌트를 생성하는 데 사용된다.

 

2. <Provider> 컴포넌트: 컨텍스트의 데이터를 제공하는 역할을 한다.

최상위 컴포넌트에서 <Provider>를 사용하여 데이터를 설정하고, 하위 컴포넌트에서 데이터에 접근할 수 있게 된다.

const MyContext = React.createContext();

function App() {
  const sharedData = "This data is shared!";

  return (
    <MyContext.Provider value={sharedData}>
      <ChildComponent />
    </MyContext.Provider>
  );
}

3. <Consumer> 컴포넌트 또는 useContext Hook: 컨텍스트 데이터에 접근하는 방법이다.

<Consumer> 컴포넌트를 사용하거나, 함수 컴포넌트에서 useContext Hook을 사용하여 데이터를 가져올 수 있다.

function ChildComponent() {
  return (
    <MyContext.Consumer>
      {(data) => <div>{data}</div>}
    </MyContext.Consumer>
  );
}

// 또는 useContext Hook 사용
function ChildComponent() {
  const data = useContext(MyContext);
  return <div>{data}</div>;
}

 

---

 

🚀 Context API의 장점과 사용 사례

 

- 전역 상태 관리 : Context API를 사용하면 전역 상태를 쉽게 관리할 수 있다. 예를 들어 사용자 인증 상태, 애플리케이션 설정, 테마 등을 관리할 수 있다.

- 컴포넌트 간 데이터 공유 : 데이터를 공유하려는 컴포넌트 간에 데이터를 전달할 필요 없이 컨텍스트를 사용하여 데이터를 공유할 수 있다.

- 중복 코드 제거 : 여러 컴포넌트에서 동일한 데이터에 접근해야 할 때, 중복 코드를 제거하고 데이터를 한 곳에서 관리할 수 있다.

 

⚡ Context API의 단점

- 성능 문제 : 컨텍스트를 사용하는 경우 모든 하위 컴포넌트가 리렌더링될 수 있으며, 성능 문제를 야기할 수 있다.

- 복잡성 : 컨텍스트를 사용하는 것은 애플리케이션 규모가 커질수록 복잡성을 높일 수 있다.
따라서 Context API를 사용할 때는 성능과 코드 구성을 고려해야 한다. 더 복잡한 상태 관리가 필요한 경우 리덕스 또는 MobX와 같은 상태 관리 라이브러리를 고려할 수 있다.