[React] useContext

React Context의 필요성

prop drilling이 깊게 일어날수록 문제가 일어난 부분을 찾기 어렵고, 어떤 에러가 생길지 파악하기 어렵다!

따라서 hook을 통해 쉽게 전역 데이터를 관리하기 위해 사용한다

 

context API 필수 개념

1) createContext: context를 생성

2) useContext: context를 구독, 해당 context의 현재 값을 읽음

3) Provider: context를 하위 컴포넌트에 전달

 

 

사용 예제

✔︎ Grandfather 컴포넌트에서 Father 컴포넌트를 거치지 않고 Child 컴포넌트로 houseName, pocketMoney를 전달하고 싶음

 

1) context 폴더와 사용할 context.js 생성, createContext + 공유할 값을 내려줄 가장 상위 컴포넌트에서 하위 컴포넌트를 context.Provider로 감싸기 + value로 공유할 값 지정해주기

 

// FamilyContext.js
import {createContext} from 'react';
export const FamilyContext = createContext(null);

// Grandfather.jsx
import {FamilyContext} from '...';

Grandfather() {
  const houseName = "스파르타";
  const pocketMoney = 10000;
  
  return (
    <FamilyContext.Provider
      value={{
        houseName,
        pocketMoney,
      }}>
      <Father/>
    </FamilyContext.Provider>
  )
}

 

2) 사용할 곳에서 context import

 

3) 이제 어떤 Child 컴포넌트로 props를 넘겨줄 필요가 없어졌다! Child에선 필요한 값을 어떻게 받을까?

// Child Component
const { houseName, pocketMoney } = useContext(FamilyContext);

 

 

유의할 점

context로 공유하는 값이 달라지면 useContext로 값을 사용하고있던 모든 컴포넌트가 리렌더링 됨