[React] Context API, useContext Hook 사용하기

Context란?

Context API를 사용하면 상위 컴포넌트에서 props로 상태와 함수를 전달받지 않고도 Context로 한 번에 원하는 값을 받을 수 있다.

따라서, 유지 보수성이 높고 사용자 정보와 같이 전역적으로 사용할 데이터가 있을 때 유용한 기능이다.

 

Context 만들기

createContext 함수를 사용해서 Context를 만들어준다. 파라미터에는 기본 상태를 지정한다. 무조건 상태 값만 있어야 되는 건 아니고 actions에 정의한 것처럼 함수를 전달할 수도 있다. 

 

Consumer와 Provider 사용하기

Consumer를 사용하여 Context의 상태 값을 조회하고 Provider로 Context의 값을 변경할 수 있다.

이때 Provider에서는 Context의 값을 명시해줘야 한다. 안 그러면 오류가 난다.

 

리액트 Hooks 중에서 useContext를 사용하면 Consumer를 사용하지 않고도 값을 받아올 수 있다.

 

useContext Hook 사용하기

먼저 useContext를 import 해온 뒤, 다음과 같이 사용하면 편하게 Context의 상태 값을 조회할 수 있다. 하지만 Hook이기 때문에 클래스형 컴포넌트에서는 사용할 수 없고 함수형에서만 사용해야 한다.

정리!

컴포넌트 구조가 복잡하고 전역적으로 사용되는 변수가 많을 경우에는 props로 계속 전달하는 것보다는 Context API를 사용하는 것이 좋다.