[2024.06.18] TIL 40일차

useContext

useContext 란?

• context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다.

• Context란?

  • 전역적인 데이터를 전달하기에 편리함
  • App 안에서 전역적으로 사용되는 데이터들을 여러 컴포넌트들끼리 쉽게 공유할 수 있는 방법 제공
  • Props를 일일이 전해주는 것이 아니라 상위 컴포넌트에서 필요한 컴포넌트에게 전해줄 수 있게됨

Context를 사용할 때 Props가 필요한 이유

• Context를 사용하면 컴포넌트 재사용하기 어려워질 수 있다.
  • Context는 꼭 필요할때만 사용해야 함
  • Props drilling을 피하기 위한 목적이라면 Component Composition(컴포넌트 합성)을 먼저 고려

Context 세가지 개념

• contextAPI를 사용하기 위해서는 Provider, Consumer, createContext 개념을 알고있어야 한다.

  • createContext : context 객체를 생성한다.
    • export const ThemeContext = createContext(초기값);
    • createContext 내부는 초기값이 들어간다.
      • 상위에서 Provider로 감싸주지 않았다면 초기값을 받아와서 사용하는 것이다.
  • Provider : 생성한 context를 하위 컴포넌트에게 전달하는 역할을 한다.
    • Children을 감싸고 전달하고자 하는 값을 value로 넣어준다.
  • Consumer : context의 변화를 감시하는 컴포넌트이다.

참조

useContext(SomeContext))

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

      import { useContext } from 'react';

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

매개변수

• SomeContext : 이전에 createContext로 생성한 context이다.
• context 자체는 정보를 보유하지 않으며, 컴포넌트에서 제공하거나 읽을 수 있는 정보의 종류를 나타낸다.
  

반환값

• useContext는 호출하는 컴포넌트에 대한 context 값을 반환한다.
• 이 값은 호출한 컴포넌트에서 트리상 위에 있는 가장 가까운 SomeContext에 전달된 value 이다.
• 이러한 provider가 없는 경우 반환되는 값은 해당 context에 대해 createContext에 전달한 defaultValue가 된다.
• 반환 값은 항상 최신값이다
• React는 context가 변경되면 context를 읽는 컴포넌트를 자동으로 리렌더링한다.