[React] Context API

---

목차

 

1. Context

2. 리액트 Context 사용 방법

3. useContext 훅이란

---

 

 

React에서 컴포넌트가 데이터를 다루는 방법으로 Props, State 그리고 Context가 있다. 오늘은 Context에 관한 개념과 사용 방법에 대해 다뤄보려고 한다.

 

 

 

 

1. Context

---

Context는 부모 컴포넌트로부터 자식 컴포넌트로 전달되는 데이터의 흐름과는 상관없이 전역적인 데이터를 다룰 때 사용한다. 전역 데이터를 Context에 저장한 후 데이터가 필요한 컴포넌트에서 해당 데이터를 불러와 사용할 수 있다.

 

 

 

 

 

React에서 Context를 사용하기 위해서는 Context API를 사용해야 하며 Context의 Provider와 Consumer를 사용해야 한다.

 

 

 

 

Context에 저장된 데이터를 사용하기 위해서는 공통 부모 컴포넌트에 Context의 Provider를 사용하여 데이터를 제공해야 하며 데이터를 사용하려는 컴포넌트에서 Context의 Consumer를 사용하여 실제로 데이터를 사용한다.

 

 

 

 

2. 리액트 Context 사용 방법

---

context는 리액트 버전 16부터 사용 가능한 리액트 내장 API이다. 따라서 어떤 리액트 프로젝트라도 리액트를 import하면 context를 바로 생성하고 사용할 수 있다.

 

리액트 context를 사용하기 위한 단계는 다음과 같다.

 

1. createContext 메서드를 사용해 context를 생성한다.
2. 생성된 context를 가지고 context provider로 컴포넌트 트리를 감싼다.
3. value prop을 사용해 context provider에 원하는 값을 입력한다.
4. context consumer를 통해 필요한 컴포넌트에서 그 값을 불러온다.

 

 

 

예제를 통해 알아보자.

다음 예제 코드를 보면 App에서 context를 사용해 이름을 전달해주고 User라는 하위 컴포넌트에서 불러온다.

import React from 'react';
export const UserContext = React.createContext();
export default function App() {
  return (
    <UserContext.Provider value="Reed">
      <User />
    </UserContext.Provider>
  )
}
function User() {
  return (
    <UserContext.Consumer>
      {value => <h1>{value}</h1>} 
      {/* prints: Reed */}
    </UserContext.Consumer>
  )
}

 

위의 코드를 한 줄씩 살펴보자.

 

1. App 컴포넌트에서 React.createContext()를 사용해 context를 만들고 UserContext 변수에 할당했다.
2. App의 값을 User 컴포넌트에 내려주기 위해 UserContext.Provider를 사용했다. 앞서 만들어진 UserContext는 Provider와 Consumer라는 두 가지 프로퍼티를 갖는 객체이다. App의 모든 컴포넌트에 값을 내려주기 위해서는 Provider 컴포넌트로 감싸주어야 한다. (위 예제의 User 컴포넌트)
3. User 컴포넌트에 Reed 값을 내려주기 위해 value 값을 Reed로 설정했다. 
4. User 혹은 context에서 제공하는 값을 사용하고 싶은 컴포넌트에서는 UserContext.Consumer라는 Consumer 컴포넌트를 사용해야 한다. 또한 전달된 값을 사용하기 위해 render props 패턴을 사용했다.

 

* Render props란?
https://ko.legacy.reactjs.org/docs/render-props.html

 

 

 

 

3. useContext 훅이란

---

리액트 훅이 도입된 리액트 16.8부터는 render props를 사용하는 대신 useContext 훅을 사용해 context를 사용할 때 컴포넌트 최상단에서 React.useContext()에 전체 context 객체를 내려줄 수 있다.

 

 

useContext 훅을 사용한 예시는 다음과 같다.

import React from 'react';
export const UserContext = React.createContext();
export default function App() {
  return (
    <UserContext.Provider value="Reed">
      <User />
    </UserContext.Provider>
  )
}
function User() {
  const value = React.useContext(UserContext);  
    
  return <h1>{value}</h1>;
}

 

 

useContext 훅의 장점은 컴포넌트가 더욱 간결해지고 나만의 커스텀 훅을 만들 수 있다는 점이다. 또한 선호하는 패턴에 따라서 consumer 컴포넌트를 직접 사용할 수도 있고 useContext 훅을 사용할 수도 있다.

 

 

 

 

참고

https://www.freecodecamp.org/korean/news/cobojareul-wihan-riaegteu-context-wanbyeog-gaideu-2021/#how-do-I-use-react-context

https://ko.legacy.reactjs.org/docs/render-props.html