[ 모던 리액트 : Deep Dive ] - 03장 리액트 훅 깊게 살펴보기 useContext

🚀 useContext

✅ context를 사용하는 이유

- 부모 컴포넌트에서 자식 컴포넌트를 내려주는 것을 prop 내려주기라고 하고, 내려주는 prop이 많아지면 props drilling이라고 부른다. 사실 props drilling을 해결하기 위해 정말 다양한 방법이 제시되는데, context도 그 중 하나이다. 

- 이 context를 함수형 컴포넌트에서 사용할 수 있게 해주는 것이 useContext 훅이다. 

 

✅ 사용방법

import { createContext, useContext } from 'react';

// (1) 
const Context = createContext(defaultValue);

export default function MyApp() {
  return (
    // (2) 
    <Context.Provider value="dark">
      <Button />
    </Context.Provider>
  );
}

function Button() {
  //(3)
  const color = useContext(Context);

  return <>{color}</>;
}

- useContext는 위와 같이 사용한다. 

(1) context를 생성하고 내보낸다.

(2) 자식을 Provider로 감싸서 부모로부터 context를 받도록 한다. 

(3) useContext 훅에 전달해 얼마나 깊이 있든지 자식 컴포넌트가 값을 읽을 수 있도록 한다. 

 

✅ 주의할 점

✔️ useContext를 사용하면 컴포넌트 재활용이 어려워진다.

- 자식 컴포넌트가 Provider에 의존적이기 때문에 아무데서나 재활용하기 어려워진다. 

- useContext를 사용하는 컴포넌트를 최대한 작게 하거나 재사용되지 않을 만한 컴포넌트에서 사용해야한다. 

 

✔️ context와 useContext는 상태 관리를 위한 리액트의 API가 아니다. 

- context는 상태를 주입해주는 API다. 

- 상태 관리 라이브러리가 되기 위해서는 (1) 어떠한 상태를 기반으로 다른 상태를 만들어 낼 수 있어야하고, (2) 필요에 따라 상태 변화를 최적화할 수 있어야하는데 context는 이 두 가지 모두에 해당하지 않기 때문에 상태관리 라이브러리가 아니다. 

- context는 단순히 상태를 주입하는 기능만 한다. 

 

✔️ useContext는 렌더링 최적화에 도움이 되지 않는다.

- useContext는 주입된 상태를 사용하기만 한다. 

- 리렌더링의 조건 중 하나가, 부모 컴포넌트가 리렌더링되면 자식 컴포넌트도 리렌더링되는 것이다. 그러므로, useContext를 사용하는 환경에서 최적화를 하기 위해서는 자식 컴포넌트를 memo화해야한다.