React 공식문서 -useContext

- useContext는 컴포넌트에서 context를 읽고 구독할 수 있게 해주는 React 훅이다.

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

---

Specifying a fallback default value(fallback 기본값 지정하기)

- React가 부모 트리에서 특정 context의 provider들을 찾을 수 없는 경우, useContext()가 반환하는 context 값은 해당 context를 생성할 때 지정한 기존 값과 동일하다.

const ThemeContext = createContext(null);

- 기본값은 절대 변경되지 않으며, context를 업데이트하려면 state를 사용해야 한다.

---

Overriding context for a part of the tree(트리 일부에 대한 context 재정의하기)

- 트리의 일부분을 다른 값의 provider로 감싸 해당 부분에 대한 context를 재정의할 수도 있다.

<ThemeContext.Provider value="dark">
  ...
  <ThemeContext.Provider value="light">
    <Footer />
  </ThemeContext.Provider>
  ...
</ThemeContext.Provider>

 

- context provider들을 중첩할 때 정보를 "누적"할 수 있다.

// App.js
import Heading from './Heading.js';
import Section from './Section.js';

export default function Page() {
  return (
    <Section>
      <Heading>Title</Heading>
      <Section>
        <Heading>Heading</Heading>
        <Heading>Heading</Heading>
        <Heading>Heading</Heading>
        <Section>
          <Heading>Sub-heading</Heading>
          <Heading>Sub-heading</Heading>
          <Heading>Sub-heading</Heading>
          <Section>
            <Heading>Sub-sub-heading</Heading>
            <Heading>Sub-sub-heading</Heading>
            <Heading>Sub-sub-heading</Heading>
          </Section>
        </Section>
      </Section>
    </Section>
  );
}

// Section.js
import { useContext } from 'react';
import { LevelContext } from './LevelContext.js';

export default function Section({ children }) {
  const level = useContext(LevelContext);
  return (
    <section className="section">
      <LevelContext.Provider value={level + 1}>
        {children}
      </LevelContext.Provider>
    </section>
  );
}

// Heading.js
import { useContext } from 'react';
import { LevelContext } from './LevelContext.js';

export default function Heading({ children }) {
  const level = useContext(LevelContext);
  switch (level) {
    case 0:
      throw Error('Heading must be inside a Section!');
    case 1:
      return <h1>{children}</h1>;
    case 2:
      return <h2>{children}</h2>;
    case 3:
      return <h3>{children}</h3>;
    case 4:
      return <h4>{children}</h4>;
    case 5:
      return <h5>{children}</h5>;
    case 6:
      return <h6>{children}</h6>;
    default:
      throw Error('Unknown level: ' + level);
  }
}

// LevelContex.js
import { createContext } from 'react';

export const LevelContext = createContext(0);

- 위 예제에서 Section 컴포넌트는 중첩의 깊이를 지정하는 LevelContext를 추적한다.

---

* 참고 : React 공식문서(https://react-ko.dev/learn)