[react] useContext

useContext를 사용하기 위해선 3가지 단계가 있다.

사용방법

1. Context 생성

// Context.js
export const LevelContext = React.createContext()

Context의 이름 컨벤션은 {name}Context이다. Component로 사용하므로, Pascal Case로 만들어준다.

2. Provider Component

import { LevelContext } from './Context';

const LevelOne = () => {
  const fetch = () => console.log('fetch...');
  return (
    <LevelContext.Provider value={fetch}>
      <LevelTwo />
    </LevelContext.Provider>
  )
}

생성한 Context의 Provider로 children을 감싸준다. value에는 원하는 값을 넣어주면 된다. 이제 LevelContext.Provider의 하위에 있는 Component들은 value에 접근할 수 있게 되었다.

3. useContext으로 value 사용

import React from 'react';
import { LevelContext } from './Context';

const LevelTwo = () => {
  const { fetch } = React.useContext(LevelContext);
  return (
    <div>
      <button onClick={fetch}>[Level2] I can fetch without props!</button>
    </div>
  )
}

생성한 Context를 import하고, useContext({생성한 Context})로 fetch를 destructuring 해서 가져온다. 이제 버튼을 클릭하면, fetch를 실행할 수 있다!

Props System과 차이점이 무엇인가?

기능적으로 차이는 없다. 하지만 Component 구조가 deep하게 props를 내려받는 경우, 중간단계의 Component에서 불필요한 props를 넣어주게 된다.

props가 많아지면 그만큼 Component관리도 어려워진다.

로직에 따라 하위 Component에서 form을 수정하고, 가장 상위 Component에서 API 요청을 해야하는 경우가 많은데, 이럴때 deep한 props 구조는 코드 분석을 피곤하게 만든다.

이러한 경우 useContext는 상당히 좋은 도구이다.
사용방법도 간단하고, 리액트에서 직접 제공하는 Component이라서 dependency도 필요없다.

Example

간단한 example 코드를 만들어봤다.
useContext를 이용해서 모든 하위 Component들이 fetch를 할 수 있다.

Ref

React Docs : useContext