[React] Context API란?

오늘은 제가 여러 전역 상태관리 라이브러리들에 관심이 생겨서 이렇게 글을 쓰게 되었습니다
오늘은 전역 상태관리 라이브러리 중 Context API 라이브러리에 대해서 설명드리겠습니다

---

❓ Context API? 그게 뭘까

React Context API

Context API는 React의 내장 API입니다

props를 사용하지 않고도 state를 쉽게 공유할 수 있게 해 줍니다

모든 컴포넌트에서 사용할 수 있는 데이터(상태, 함수 등등)를 전달할 때 유용합니다

(예: 사용자 로그인 정보, 테마 설정, 언어 설정 등)

---

🔍 장단점

장점

• React에서 자체적으로 제공하는 기술이기 때문에 따로 설치할 필요가 없습니다
• 다른 전역 상태관리 라이브러리들보다 배우기 쉽습니다
• 코드 구성이 간결합니다

단점

• 상위 컴포넌트 state가 변화하면 하위 컴포넌트가 모두 리렌더링 된다는 엄청난 성능 문제가 있습니다

---

🎯 사용법

순서

1. Context 생성
2. Provider 생성
3. Provider 감싸기
4. 사용하기

Context 생성하기

React에서 제공하는 createContext 메서드를 사용해서 Context를 생성합니다

import { createContext } from "react";

const Context = CreateContext(); // Context 생성

Provider 생성하기

이 Provider는 위에 선언한 Context를 관리합니다
value에 저것을 넣어주는 이유는 하위 컴포넌트에게 Context의 값과 이를 수정할 수 있는 setContext를 넘겨주기 위해서입니다

export function ExamProvider({ baby }) {
  const [Context, setContext] = useState(null);
  return (
    <Context.Provider value={{ Context, setContext }}>{baby}</Context.Provider>
  );
}

Provider 감싸기

이제 Context API를 사용할 하위 컴포넌트의 위에서 생성한 Provider로 감싸줍니다

import { ExamProvider } from './Context';
import Example from './Example'; 
export function App() {
  return (
    <ExamProvider>
      <Example />
    </ExamProvider>
  );
}

사용하기

하위 컴포넌트에서는 이것들을 가져와서 사용하면 됩니다

이제 이 값들을 사용해 전역적으로 사용할 수 있게 됩니다

import { useContext } from 'react';
import { Context } from './MyContext';

const Example = () => {
  const { contextValue, setContextValue } = useContext(Context);

  return (
    <div>
      <p>Value: {contextValue}</p>
      <button onClick={() => setContextValue("새로운 값")}>새로운 값 줘</button>
    </div>
  );
};

---

글을 마치며

오늘은 이렇게 React에 내장되어 있는 전역 상태관리를 할 수 있는 Context API 사용법을 알아보았는데요
이렇게 쉽게 사용할 수 있는 Context API를 잘 사용해 보셨으면 좋겠습니다