[TIL027] Context API

20240524 27일차

Context API

Context API는 React에서 기본적으로 내장되어 있는 전역 상태를 관리하기 위한 도구이며,
컴포넌트 트리 전체에 데이터를 전달할 때 유용하다.

Props를 이용해서 전역에서 사용하는 상태들을 Props 형태로 넘겨주면 에러가 났을 시에 어디에서 에러가 났는지 찾기 힘들기 때문에 Context API를 사용해서 전역 상태를 관리해주면 편리하다.

Context 생성 및 내보내기

import { createContext } from 'react';
export const MyContext = createContext(null);

프로젝트 내에 Context 폴더를 만들고 MyContext.jsx 파일 (임의로 지은 이름) 을 생성한다.

Context 가져오기

import { MyContext } from 'Context 파일 경로';

가져올 때는 위처럼 가져오면 된다.

보낼 전역 변수 설정하기

return (
	<MyContext.Provider value={data}> //data 안에 전해줄 전역 상태를 적으면 끝!
  		<Title />
  		<Message />
 	</MyContext.Provider>
);

Redux vs. Context API

간단해서 편리한 Context API도 단점은 존재한다.
상태가 바뀔 때마다 해당 상태를 사용하는 모든 컴포넌트가 다시 그려지기 때문에 앱이 느려질 수 있다.
상태가 복잡해지면 관리하기 어려워지고, Redux처럼 다양한 도구를 사용할 수 없다..
이러한 이유 때문에 큰 프로젝트를 만든다면 선택의 여지는 없다... 따흐흑...