[React] Context API란 무엇인가

useReducer를 학습하기 전에 먼저 useContext부터 짚고 넘어가기!

정신차리고 레츠고🏃‍♀️

---

A 컴포넌트 > B 컴포넌트 > C 컴포넌트 순으로 계층적 구조를 이루고 있을 때, C 컴포넌트에서 조상인 A 컴포넌트의 상태를 가져오려고 한다. 이럴 땐 어떻게 해야할까?

A 컴포넌트에서 B 컴포넌트의 props에 상태를 전달하고 B 컴포넌트에서 C 컴포넌트의 props에 상태를 전달하면 된다.

그런데 depth가 10이 되는 경우에도 모든 컴포넌트에 해당 상태를 props로 일일이 전달해야 하는걸까?

 

🎣  useContext

앞서 말한 현상을 props drilling이라고 한다. 대표적인 anti-pattern으로, 작동은 하겠지만 이렇게 작성할 경우 해당 props가 어디서부터 내려온 것인지 특정하기 어려워 진다는 단점이 있다.

뿐만 아니라 state 하나가 변경되면 모든 컴포넌트가 다시 렌더링되는 단점도 있다.

useContext는 특정한 값을 모든 컴포넌트에서 사용할 수 있도록 만들어놓고, 어디서든 특정한 값을 불러와서 사용할 수 있도록 해주는 Hook이다.

 

💻 Context API 활용하기

1. context 생성

export const UserContext = createContext(초기값)

최상위 컴포넌트에서 createContext로 context를 만들어준다. 초기값이 없다면 null이 전달된다.

하위 컴포넌트에서 context를 사용하기 위해선 export 처리를 해줘야 한다.

context는 쉽게 표현하면 state 보관함이다.

 

 

2. context명.Provider로 하위 컴포넌트 감싸주기

<UserContext.Provider value={ '여러 컴포넌트에서 사용하고 싶은 값' }>
  <UserList />
</UserContext.Provider>

UserContext.Provider로 UserList를 감싸주면 UserList 뿐만 아니라 UserList의 하위 컴포넌트까지도 context에 저장된 state를 사용할 수 있다.

 

 

3. 하위 컴포넌트에서 useContext로 state 사용

import { UserContext } from '../App'
const { value 에 넘겨줬던 키 } = useContext(UserContext)

최상위 컴포넌트에서 선언했던 UserContext를 import로 불러온 뒤, useContext를 사용하여 UserContext 안에 담긴 state를 꺼내서 사용할 수 있다.

 

 

👎 Context API의 단점

1. state 변경시 쓸데없는 컴포넌트까지 전부 재렌더링이 된다. (Memoization을 사용하여 최적화 가능)
2. useContext() 를 쓰고 있는 컴포넌트는 나중에 다른 파일에서 재사용할 때 Context를 import 하는게 귀찮아질 수 있다.

이러한 이유 때문에 Context API보다는 Redux같은 상태 관리 라이브러리를 많이 사용하는 편이다.