useContext

useContext란 ?

React 에서 제공하는 훅 (Hook) 중 하나로, React 애플리케이션에서 전역적으로 상태를 관리하고 공유할 수 있도록 해준다.

 

useContext를 사용하면 하위 컴포넌트들이 props를 통해 데이터를 일일이 전달받지 않고도 부모 컴포넌트에서 제공하는 데이터를 직접 접근할 수 있게 된다.

 

• Context :  데이터를 여러 컴포넌트들 사이에서 쉽게 공유할 수 있게 해주는 도구. 이전에 createContext로 생성한 context이다. context자체는 정보를 보유하지않으며,컴포넌트에서 제공하거나 읽을 수 있는 정보의 종류를 나타낼 뿐이다.

예를 들어, 로그인한 사용자 정보나 테마 설정 같은 것을 여러 컴포넌트에서 사용해야 할 때 유용하다.

 

• Provider: 데이터를 공급해주는 역할을 한다. Provider가 있어야그 아래에 있는 모든 컴포넌트들이 그 데이터를 사용할 수 있다.
• useContext : Context로부터 데이터를 쉽게 가져올 수 있게 해주는 함수로 호출하는 컴포넌트에 대한 context값을 반환한다. 

 

비유로 설명하기

• Context를 큰 상자라고 생각하자, 이 상자 안에는 모든 컴포넌트들이 필요로 하는 정보가 들어있다
• Provider는 이 상자를 배달해주는 사람이다. Provider가 상자를 배달하면 그 상자를 받은 모든 사람들(컴포넌트)은 상자에 든 정보를꺼내서 쓸 수 있다.
• useContext는 상자를 열고 그 안의 정보를 꺼내는 열쇠이다.

이렇게 생각하면 쉬워보이죠?

---

참조

 

useContext는 컴포넌트의 최상위 레벨에서 useContext를 호출하여 context를 읽고 구독한다.

import { useContext } from 'react';

function MyComponent() {
  const theme = useContext(ThemeContext);
  // ...

 

 

반환값

 

ussContext 훅을 사용하면 해당 컨텍스트의 값(Context value)을 가져올 수 있다. 이 값은 컴포넌트 트리 상에서 가장 가까운 SomeContext.Provider에 의해 제공된 값이다. 만약 컴포넌트 트리 상에 Provider가 없으면, 컨텍스트를 만들 때 제공한 기본값 (defaultValue)을 사용한다.

 

useContext훅이 반환하는 값은 항상 최신 상태를 반영한다. 이는 컨텍스트 값이 변경될때 마다 해당 값을 사용하는 컴포넌트가 자동으로 리렌더링 되기 때문이다.

 

주의사항

 

컴포넌트의 useContext() 호출은 동일한 컴포넌트에서 반환된 provider의 영향을 받지 않는다.

해당 <Context.Provider>는 반드시 useContext() 호출을 수행하는 컴포넌트의 위에 있어야 한다.

 

React는 변경된 value를 받는 provider부터 시작해서 해당 context를 사용하는 자식들에 대해서까지 전부 자동으로 리렌더링 한다.

이전 값과 다음 값은 Obiect.js로 비교한다. memo로 리렌더링을 건너뛰어도 새로운 context값을 수신하는 자식들을 막지는 못한다

 

빌드 시스템이 출력 결과에 중복 모듈을 생성하는 경우, 특히 심볼릭 링크를 사용하는 경우에는 React 컨텍스트가 의도치 않게 손상될 수 있다. 왜냐하면  컨텍스트를 제공하는 SomeContext와 컨텍스트를 읽는 SomeContext가 정확히 동일한 객체이어야만 제대로 작동하기 때문이다.

 

Usage

트리 깊숙이 데이터 전달하기

 

import { useContext } from 'react';

function Button() {
  const theme = useContext(ThemeContext);
  // ...

 

useContext는 전달한 context에 대한 context 값을 반환한다. context값을 결정하기 위해 React는 컴포넌트 트리를 검색하고 특정 context에 대해 위에서 가장 가까운 context provider를 찾는다.

 

context를 button에 전달하려면 해당 버튼 또는 상위 컴포넌트 중 하나를 해당 context provider로 감싼다.

 

function MyPage() {
  return (
    <ThemeContext.Provider value="dark">
      <Form />
    </ThemeContext.Provider>
  );
}

function Form() {
  // ... renders buttons inside ...
}

 

Provider와 Button 사이에 얼마나 많은 컴포넌트 레이어가 있는지는 중요하지 않다. Form 내부의 Button이 useContext(ThemeContext) 를 호출하면 "dark" 를 값으로 받는다.

 

 함 정

useContext() 는 항상 이것을 호출하는 컴포넌트 위의 가장 가까운 provider를 찾는다. useContext()를 호출하는 컴포넌트 내의 provider는 고려하지 않는다.