[React] Context API 와 useContext Hook

서론

React Prop 을 사용하다 보면, 불필요한 Props Chain 이 발생하게 된다.

이러한 문제점을 해결하기 위해, Context API 를 활용할 수 있다. 

Context API 는 Provider 과 Consumer 를 통해 사용할 수 있으며, 

Consumer 는 useContext Hook 을 통해서도 사용할 수 있다.

Context API 와 useContext Hook 을 활용하여 불필요한 Props Chain 을 제거하는 방법에 대해 정리하려고 한다.

---

불필요한 Props Chain

아래와 같은 간단한 가상의 쇼핑 앱을 예로 들어보겠다.

메인 컴포넌트인 App 이 있고, 하위에 아래와 같은 섹션들이 각각의 컴포넌트로 존재한다.

• 로그인을 담당하는 Auth 섹션
• 상품 정보를 보여주는 Shop 섹션
• 장바구니 정보를 보여주는 Cart 섹션

실제 사용자가 LoginForm 을 채우고 로그인 이벤트가 일어나고 나면,

해당 로그인 정보를 필요로 하는 Shop 이나 Cart 컴포넌트에 Login State 를 전달해주어야 한다.

하지만 Shop 이나 Cart 와 LoginForm 컴포넌트는 직접적으로 연결되어 있지 않다.

따라서 각자 연결된 다른 컴포넌트들의 Prop 을 통해 Login 상태를 넘겨 받아야 하는데,

실제 Login State 를 사용하지 않지만 단순히 다른 컴포넌트에 전달해주기 위해 Prop 을 사용해야 하는 컴포넌트가 존재하게 된다.

불필요한 Props Chain 이 생기게 되는 것이다.

이는 앱이 커질수록 불편함을 야기하게 된다.

불필요한 Props Chain

---

React Context

위와 같은 불필요한 Props Chain 을 줄이기 위해, React Context 라는 개념을 사용할 수 있다.

React Context 는 React 에 내장된 내부적인 State 저장소이며 원하는 컴포넌트에서 필요 시 접근할 수 있다.

React Context

---

React Context API 와 UseContext Hook 사용하기

그렇다면, 실제 React 프로젝트에서 React Context 를 사용하려면 어떻게 해야할까?

실제 context 로 사용할 객체의 정보를 담고 있을 파일 하나가 필요하며,

객체의 정보를 제공해줄 Provider 와 실제 객체 정보를 사용할 Consumer 가 필요하다.

Context

쇼핑할 아이템을 담는 쇼핑카트 Context 를 예로 들어보자.

아래와 같이 카트에 들어있는 아이템을 저장할 items 배열, 카트에 들어있는 아이템들의 가격을 저장할 totalAmount,

아이템을 추가하거나 삭제할 때 사용할 addItem, removeItem 함수를 객체 형태로 지정할 수 있다.

 

해당 Cart 객체를 React Context 로 활용하기 위해, React.createContext() 메소드를 활용하여 아래와 같이 생성한다.

Context 를 정의할 cart-context.js 파일과 해당 Context 를 Provide 해줄 CartProvider.js 파일은 별도의 폴더에 묶어서 관리했다.

cart-context.js

Context Provider

위에서 정의한 CartContext 를 사용할 다른 컴포넌트에서 불러 쓰기 위해서는 Provider 가 필요하다.

CartContext 를 다른 컴포넌트들에게 전달해 줄 CartProvider 컴포넌트를 아래와 같이 정의했다.

해당 컴포넌트에서는 CartContext 를 import 받아, 아래와 같이 CartContext.Provider 태그로 감싸서 return 한다.

value 값은 필수이며, CartProvider 내부에서 useReducer 를 사용해 정의한 cartContext 변수를 넘겨준다.

CartProvider.js

위에서 정의한 Cart Context 는 어플리케이션에 있는 모든 컴포넌트에서 접근이 가능해야 하므로,

아래와 같이 App.js 에서 CartProvider 태그로 전체를 감싸서 return 한다.

CartProvider 적용

Context Consumer

App.js 에서 CartProvider 로 전체를 감쌌기 때문에,

모든 컴포넌트에서 CartContext 에 접근이 가능하다.

그럼, 어떻게 CartContext 값을 사용할 수 있을까?

아래와 같이 useContext 훅을 사용하면 간단하게 위에서 정의한 Context 를 사용할 수 있다.

 

아래는 CartContext 에 있는 아이템들을 화면에 List 형태로 뿌려주고, 각각의 아이템을 삭제하거나 추가할 수 있는 버튼도 같이 렌더링하는 Cart.js 라는 컴포넌트이다.

useContext 훅을 사용하여 현재 저장된 CartContext 값을 변수에 담아 해당 컨텍스트에 저장된 함수를 호출하거나,

변수를 불러와 화면에 렌더링해 줄 수 있다.

useContext Hook

---

정리

간단한 Cart 예시를 통해 React Context 와 useContext 훅에 대해 알아보았다.

정리하면, React Context 를 사용하기 위해서는 React.createContext() 를 활용해 Context 를 생성해 주어야 하며

생성된 Context 를 모든 컴포넌트가 접근할 수 있도록 하며 컨텍스트 값을 변경해줄 Provider 가 필요하다.

실제 Context 에 접근이 필요한 경우 useContext 훅을 통해 컨텍스트 값을 가져올 수 있다.

---

참조

https://www.udemy.com/course/best-react/