[React] Context

공식문서

Context란?

단방향 데이터 흐름인 React의 부족한 점(props drilling)을 보완하기 위해 나옴. 즉, 데이터를 전역적으로 접근할 수 있게 해주는 API.

Context 기본예제

• Context 및 Provider생성

const MyContext = React.createContext

funcrtion MyContextProvider({ children }) {
	const [state, setState] = useState("Context Value");
    
    return (
    	<MyContext.Provider 
        value={
            state,
            setState
        }
        >
        	{children}
        </MyContext.Provider>
    )
}

export default MyContextProvider;

• Provider사용법

<MyContextProvider>
	<AComponent />
	<BComponent />
</MyContextProvider>

• 실제 컴포넌트에서의 사용

import { MyContext } from '@/contexts/MyContext';

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

	return <>{state}</>
}

export default AComponent;

Context와 상태관리 라이브러리(redux) 비교

위 설명을 보았을 때 Context API와 상태관리 라이브러리의 차이점을 알아야할 것 같다. 굳이 상태관리 라이브러리를 사용해야할까? 라는 의구심이 들 수 있을 것이다.

많은 상태관리 라이브러리중 React와 함께 자주 사용되는 Redux를 비교해보기로했다.

Context와 Redux의 차이를 설명해준 자료_1
Context와 Redux의 차이를 설명해준 자료_2

불필요한 re-render를 없애기 위함이 redux의 핵심인 것 같다.

정확히는 Context의 Provider내의 컴포넌트에서 state를 업데이트하면 그 state를 사용하는 컴포넌트 모두에서 re-rendering이 일어나게된다.

Context, useState, useRuducer, useMemo등을 사용하면 되지만, 이는 redux를 재창조하는 것과 다름 없는 일이다.