리액트 프로젝트에서 컴포넌트 간에 필요한 상태를 관리위해 props로 전달합니다. props는 부모 컴포넌트에서 자식 컴포넌트로만 내려줄 수 있습니다.

그러나 프로젝트의 규모가 커질수록 수 많은 컴포넌트를 거쳐야 할 때도 있고 다루어야 할 데이터가 훨씬 많아질 수도 있습니다. props만을 이용한 상태관리는 유지 보수성이 낮아질 가능성이 높습니다.

프로젝트 내에서 환경 설정, 사용자 로그인 정보, 테마, 언어 정보와 같은 전역적으로 필요한 상태를 관리하기 위해 리액트는 Context API를 제공합니다. Context API 말고도 관련된 상태 관리 라이브러리들도 많이 있습니다.

Context API

Context API는 프로젝트 내에서 전역적으로 사용하는 데이터들을 여러 컴포넌트들끼리 쉽게 공유할 수 있는 방법을 제공해줍니다.

Context API를 사용하는 방법을 알아보겠습니다.

createContext

리액트의 createContext() 함수를 이용하여 새로운 context를 생성합니다. 파라미터에는 해당 context의 기본값을 지정합니다.

import { createContext } from 'react';

const MyContext = createContext(null);

export default MyContext;

Context Provider

context를 사용할 상위 컴포넌트에서 context의 Provider로 하위 컴포넌트들을 감싸줍니다. Context Provider은 value라를 porp을 하나 받습니다. value 안에는 우리가 전달하고자 하는 데이터를 집어넣어주면 됩니다.

import { MyContext } from './MyContext';

const App = () => {
	return(
      <MyContext.Provider value={{name : '홍길동'}}>
    	<ChildComponent1 />
      	<ChildComponent2 />
      	<Child1Component3 />
      </MyContext.Provider>
    );
}

export default MyContext;

Provider로 감싼 컴포넌트들은 모두 value에 들어있는 데이터를 공유할 수 있습니다.

useContext

이제 Provider 내부에 있던 컴포넌트들은 useContext Hook을 이용해 데이터를 꺼내 쓸 수 있습니다.

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

const ChildComponent1 = () => {
  	const data = useContext(MyContext);
          
	return(
      <div>
      	<h1>{data.name}</h1>
      <div>
    );
}

export default ChildComponent1;