Context API 이해하기

시작하며

전역 상태 관리를 위해 redux를 공부해봤지만 redux가 작은 프로젝트에서 사용되기에는 초기에 구축에 있어서 피로가 상당했다. 그렇지만 가끔 로그인한 유저, themeColor와 같이 계속 prop을 넘겨주기에는 props drilling이 발생했다. redux와 같이 본격적으로 전역 상태 관리를 하지 않고 몇개의 변수에 대해 context API를 사용해서 props drilling을 줄이고자 context API에 대한 내용을 정리하게 되었다.

 

Context API란

• Context는 리엑트 컴포넌트 간에 값을 공유할 수 있게 도와준다.
• 주로 Context는 전역에서 필요한 값을 공유할 때 사용되지만 부분적인 역역에서 사용할 수 있다.
• 기존 Props를 통한 전달이 아닌 다른 방법

 

Context 생성

const ThemeContext = React.createContext('light')
//React 내에 있는 createContext로 생성할 수 있다.

 

Context 사용

• 아래와 같이 MyContext를 만들면 MyContext 내부에 Provider를 통해 공유하고자 하는 component들에게 제공할 수 있다. 
• 값에 접근하기 위해서는 react hook인 useContext를 통해 context 이름을 제공하면 해당 context가 제공하는 값을 가져올 수 있다.
• 이런 방법으로 Provier 아래 어디에 있던 간에 Context에 접근해서 값을 가져올 수 있다. 

const MyContext = React.createContext()

function App(){
	return (
		<MyContext.Provider value="austin">
			<Childrens/>
		</MyContext.Provider>
	)
}

...
function NameContainer(){
	const name = useContext(MyContext);
	return <h1>{name} is my name</h1>
}

 

Context 사용시 고려해야 할 점

• Context를 사용할 경우 component 재사용이 어려워질 수 있다. 과한 Context사용에 주의해야 한다.
• Context는 상태를 '관리하지 않는다'라는 점에서 redux와 같은 전역 상태 라이브러리들과 다르다
• Context를 제공해주는 부모에 값을 저장하다보니 부하가 걸리고, 또 Provier가 제공하는 값이 변경되었을 대 하위 모든 값이 변경되는 등의 어려움이 있어서 Recoil과 같은 라이브러리를 통해 더 나은 방법을 찾을 수 있다.(Recoil에 대해서 자세히 공부해봐야겠다.)

 

 

참조

https://velog.io/@velopert/react-context-tutorial

다른 사람들이 안 알려주는 리액트에서 Context API 잘 쓰는 방법

https://blog.isquaredsoftware.com/2021/01/context-redux-differences/

Blogged Answers: Why React Context is Not a "State Management" Tool (and Why It Doesn't Replace Redux)