React 24. Passing Data Deeply with Context

뚜루미·2024년 4월 2일
ReactuseContext

React

목록 보기
24/39
post-thumbnail

#일반적으로 부모 컴포넌트에서 자식 컴포넌트로 props를 통해 정보를 전달합니다. 하지만 중간에 여러 컴포넌트를 거쳐야 하거나 앱의 여러 컴포넌트가 동일한 정보를 필요로 하는 경우 props를 전달하면 장황하고 불편해질 수 있습니다. Context를 사용하면 부모 컴포넌트가 props를 통해 명시적으로 전달하지 않고도 깊이 여부와 무관하게 그 아래 트리의 모든 컴포넌트에서 일부 정보를 사용할 수 있습니다.

The problem with passing props

props 전달은 UI 트리를 통해 데이터를 사용하는 컴포넌트로 명시적으로 연결할 수 있는 좋은 방법입니다.

그러나 트리 깊숙이 prop을 전달해야 하거나 많은 컴포넌트에 동일한 prop이 필요한 경우 prop 전달이 장황하고 불편해질 수 있습니다. 가장 가까운 공통 조상이 데이터가 필요한 컴포넌트에서 멀리 떨어져 있을 수 있으며, 상태를 그렇게 높이 끌어 올리면 “prop drilling”이라고 불리는 상황이 발생할 수 있습니다.

props를 전달하지 않고도 트리에서 데이터를 필요한 컴포넌트로 “텔레포트”할 수 있는 방법이 있다면 좋지 않을까요? React의 context 기능을 사용하면 가능합니다.

Context: an alternative to passing props

Context를 사용하면 상위 컴포넌트가 그 아래 전체 트리에 데이터를 제공할 수 있습니다. context는 다양한 용도로 사용됩니다. 다음은 한 가지 예시입니다. 크기에 대한level 을 받아들이는 Heading 컴포넌트를 생각해 봅시다 :

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

export default function Page() {
  return (
    <Section>
      <Heading level={1}>Title</Heading>
      <Heading level={2}>Heading</Heading>
      <Heading level={3}>Sub-heading</Heading>
      <Heading level={4}>Sub-sub-heading</Heading>
      <Heading level={5}>Sub-sub-sub-heading</Heading>
      <Heading level={6}>Sub-sub-sub-sub-heading</Heading>
    </Section>
  );
}

// Section.js
export default function Section({ children }) {
  return (
    <section className="section">
      {children}
    </section>
  );
}

// Heading.js
export default function Heading({ level, children }) {
  switch (level) {
    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);
  }
}

동일한 Section 내의 여러 제목이 항상 같은 크기를 갖도록 하려고 한다고 가정해 보겠습니다.

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

export default function Page() {
  return (
    <Section>
      <Heading level={1}>Title</Heading>
      <Section>
        <Heading level={2}>Heading</Heading>
        <Heading level={2}>Heading</Heading>
        <Heading level={2}>Heading</Heading>
        <Section>
          <Heading level={3}>Sub-heading</Heading>
          <Heading level={3}>Sub-heading</Heading>
          <Heading level={3}>Sub-heading</Heading>
          <Section>
            <Heading level={4}>Sub-sub-heading</Heading>
            <Heading level={4}>Sub-sub-heading</Heading>
            <Heading level={4}>Sub-sub-heading</Heading>
          </Section>
        </Section>
      </Section>
    </Section>
  );
}

현재 level prop을 각 <Heading> 에 개별적으로 전달합니다

대신 level prop을 <Section> 컴포넌트로 전달하고 <Heading> 에서 제거할 수 있다면 좋을 것입니다. 이렇게 하면 같은 section의 모든 제목이 같은 크기를 갖도록 강제할 수 있습니다.

<Section level={3}>
  <Heading>About</Heading>
  <Heading>Photos</Heading>
  <Heading>Videos</Heading>
</Section>

하지만 <Heading> 컴포넌트가 가장 가까운 <Section> 의 level을 어떻게 알 수 있을까요? 그러기 위해서는 자식이 트리 위 어딘가에서 데이터를 “요청”할 수 있는 방법이 필요합니다.

props 만으로는 부족합니다. 이 때, context가 중요한 역할을 합니다.

  1. context를 생성합니다 (제목 level을 위한 것이므로 LevelContext 라고 부를 수 있습니다.)
  2. 데이터가 필요한 컴포넌트에서 해당 context를 사용합니다. (Heading은 LevelContext를 사용합니다.)
  3. 데이터를 지정하는 컴포넌트에서 해당 context를 제공합니다. (Section은 LevelContext를 제공합니다.)

context는 멀리 떨어져 있는 상위 트리라도 그 안에 있는 전체 트리에 일부 데이터를 제공할 수 있게 해줍니다.

Step 1: Create the context

먼저 context를 만들어야 합니다. 컴포넌트에서 사용할 수 있도록 파일에서 내보내기를 해야 합니다.

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

createContext 의 유일한 인수는 기본값입니다. 여기서 1 은 가장 큰 제목 수준을 의미하지만 모든 종류의 값(객체 포함)을 전달할 수 있습니다. 기본값의 중요성은 다음 단계에서 확인할 수 있습니다.

Step 2: Use the context

React와 context에서 useContext Hook을 가져옵니다.

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

현재 Heading 컴포넌트는 props에서 level 을 읽습니다

export default function Heading({ level, children }) {
  // ...
}

대신 level prop을 제거하고 방금 import한 context인 LevelContext 에서 값을 읽습니다.

export default function Heading({ children }) {
  const level = useContext(LevelContext);
  // ...
}

useContext 는 Hook입니다. useState 및 useReducer 와 마찬가지로, React 컴포넌트의 최상단에서만 Hook을 호출할 수 있습니다. useContext 는 React에게 Heading 컴포넌트가 LevelContext 를 읽기를 원한다고 알려줍니다.

이제 Heading 컴포넌트에는 level prop이 없으므로 더 이상 JSX에서 이런 식으로 Heading 에 level prop을 전달할 필요가 없습니다.

<Section level={4}>
  <Heading>Sub-sub-heading</Heading>
  <Heading>Sub-sub-heading</Heading>
  <Heading>Sub-sub-heading</Heading>
</Section>

대신 Section 이 level을 받도록 JSX를 수정합니다.

이 예제는 아직 제대로 작동하지 않습니다. context를 사용하고 있지만 아직 context를 제공하지 않았기 때문에 모든 제목의 크기가 동일합니다.

context를 제공하지 않으면 React는 이전 단계에서 저장한 기본 값을 사용합니다. 이 예제에서는 createContext 의 인수로 1 을 지정했기 때문에, useContext(LevelContext) 는 1 을 반환하고 모든 제목을 <h1> 으로 설정합니다. 각 Section 이 자체 context를 제공하도록 하여 이 문제를 해결해 보겠습니다.

Step 3: Provide the context

Section 컴포넌트는 현재 children을 렌더링합니다:

이를 context provider로 감싸 LevelContext 를 제공하세요.

import { LevelContext } from './LevelContext.js';

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

이는 React에게 “ 이 <Section> 안에 있는 컴포넌트가 LevelContext 를 요청하면 이 level 을 제공하라.”고 지시합니다. 컴포넌트는 그 위에 있는 UI 트리에서 가장 가까운 <LevelContext.Provider> 의 값을 사용합니다.

원래 코드와 동일한 결과이지만, 각 Heading 컴포넌트에 level prop을 전달할 필요가 없습니다. 대신, 위의 가장 가까운 Section 에 요청하여 제목 level을 파악합니다:

  1. level prop을 <Section> 에 전달합니다.
  2. Section 은 section의 children을 <LevelContext.Provider value={level}> 로 감쌉니다.
  3. Heading 은 useContext(LevelContext) 를 사용하여 위의 LevelContext 값에 가장 가까운 값을 요청합니다.

Using and providing context from the same component

현재는 여전히 각 section의 level 을 수동으로 지정해야 합니다:

export default function Page() {
  return (
    <Section level={1}>
      ...
      <Section level={2}>
        ...
        <Section level={3}>
          ...

context를 사용하면 위의 컴포넌트에서 정보를 읽을 수 있으므로 각 section 은 위의 Section 에서 level 을 읽고 level + 1 을 자동으로 아래에 전달할 수 있습니다.

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>
  );
}

이렇게 변경하면 level prop을 <Section> 이나 <Heading> 모두에 전달할 필요가 없습니다.

// 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 과 Section 은 모두 LevelContext 을 읽어 얼마나 “깊은” 수준인지 파악합니다. 그리고 Section 은 그 children을 LevelContext 로 감싸 그 안에 있는 모든 것이 “더 깊은” level에 있음을 지정합니다.

이 예제에서는 중첩된 컴포넌트가 context를 재정의하는 방법을 시각적으로 보여주기 위해 제목 level을 사용합니다. 하지만 context는 다른 많은 사용 사례에도 유용합니다. context를 사용하여 현재 색상 테마, 현재 로그인한 사용자 등 전체 하위 트리에 필요한 모든 정보를 전달할 수 있습니다.

Context passes through intermediate components

context를 제공하는 컴포넌트와 context를 사용하는 컴포넌트 사이에 원하는 만큼의 컴포넌트를 삽입할 수 있습니다. 여기에는 <div> 와 같은 기본 제공 컴포넌트와 사용자가 직접 빌드할 수 있는 컴포넌트가 모두 포함됩니다.

이 예시에서는 동일한 Post 컴포넌트(점선 테두리 포함)가 두 개의 서로 다른 중첩 단계에서 렌더링됩니다. 그 안의 <Heading> 이 가장 가까운 <Section> 에서 자동으로 level을 가져오는 것을 볼 수 있습니다:

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

export default function ProfilePage() {
  return (
    <Section>
      <Heading>My Profile</Heading>
      <Post
        title="Hello traveller!"
        body="Read about my adventures."
      />
      <AllPosts />
    </Section>
  );
}

function AllPosts() {
  return (
    <Section>
      <Heading>Posts</Heading>
      <RecentPosts />
    </Section>
  );
}

function RecentPosts() {
  return (
    <Section>
      <Heading>Recent Posts</Heading>
      <Post
        title="Flavors of Lisbon"
        body="...those pastéis de nata!"
      />
      <Post
        title="Buenos Aires in the rhythm of tango"
        body="I loved it!"
      />
    </Section>
  );
}

function Post({ title, body }) {
  return (
    <Section isFancy={true}>
      <Heading>
        {title}
      </Heading>
      <p><i>{body}</i></p>
    </Section>
  );
}

이 기능을 작동하기 위해 특별한 작업을 수행하지 않았습니다. Section 은 그 안에 있는 트리의 context를 지정하므로 아무 곳에나 <Heading> 을 삽입할 수 있으며 올바른 크기를 갖습니다.

Context를 사용하면 “주변 환경에 적응”하고 렌더링되는 위치(context)에 따라 다르게 표시되는 컴포넌트를 작성할 수 있습니다.

context가 작동하는 방식은 CSS 속성 상속을 떠올리게 할 수 있습니다. CSS에서는 <div> 에 color: blue 을 지정할 수 있으며, 중간에 다른 DOM 노드가 color: green 으로 재정의하지 않는 한 그 안에 있는 모든 DOM 노드는 아무리 깊어도 그 색을 상속받습니다. 마찬가지로 React에서 위에서 오는 context를 재정의하는 유일한 방법은 children을 다른 값으로 context provider로 감싸는 것입니다.

CSS에서는 color 및 background-color 와 같은 서로 다른 속성이 재정의되지 않습니다. background-color 에 영향을 주지 않고 모든 <div> 의 color 를 빨간색으로 설정할 수 있습니다. 마찬가지로 서로 다른 React context도 서로 재정의하지 않습니다. createContext() 로 만드는 각 context는 다른 context와 완전히 분리되어 있으며, 특정 context를 사용허가너 제공하는 컴포넌트를 함께 묶습니다. 하나의 컴포넌트가 문제없이 다양한 context를 사용하거나 제공할 수 있습니다.

Before you use context

context는 사용하기 매우 유혹적입니다! 그러나 이는 또한 너무 쉽게 남용될 수 있다는 의미이기도 합니다. props를 몇 단계 깊이 전달해야 한다고 해서 해당 정보를 context에 넣어야 한다는 의미는 아닙니다.

다음은 context를 사용하기 전에 고려해야 할 몇가지 대안입니다:

  1. props 전달로 시작하세요. 컴포넌트가 사소하지 않다면, 수십 개의 props를 수십 개의 컴포넌트에 전달해야 하는 경우가 드물지 않습니다. 지루하게 느껴질 수도 있지만, 어떤 컴포넌트가 어떤 데이터를 사용하는지 매우 명확해집니다. 코드를 유지 관리하는 사람은 props를 사용하여 데이터 흐름을 명확하게 만든 것에 만족할 것입니다.
  2. 컴포넌트를 추출하고 JSX를 children 으로 전달하세요. 일부 데이터를 해당 데이터를 사용하지 않는 중간 컴포넌트의 여러 레이어를 거쳐 전달한다면 이는 종종 그 과정에서 일부 컴포넌트를 추출하는 것을 잊었다는 것을 의미합니다. 예를 들어, posts 와 같은 데이터 props를 직접 사용하지 않는 시각적 컴포넌트에 <Layout posts={posts} /> 와 같은 방법 대신, Layout이 childrean을 prop으로 사용하도록 만들고 <Layout> <Posts posts={posts} /> </Layout> 를 렌더링합니다. 이렇게 하면 데이터를 지정하는 컴포넌트와 데이터를 필요로 하는 컴포넌트 사이의 레이어 수가 줄어듭니다.

이 두가지 접근 방식이 모두 적합하지 않은 경우 context를 고려하세요.

Use cases for context

  • 테마 : 앱에서 사용자가 앱의 모양을 변경할 수 있는 경우(예: 다크 모드), 앱 상단에 context provider를 배치하고 시각적 모양을 조정해야 하는 컴포넌트에서 해당 context를 사용할 수 있습니다.
  • 현재 계정: 많은 컴포넌트에서 현재 로그인한 사용자를 알아야 할 수 있습니다. 이 정보를 context에 넣으면 트리의 어느 곳에서나 편리하게 읽을 수 있습니다. 또한 일부 앱에서는 여러 계정을 동시에 조작할 수 있습니다. 이러한 경우 UI의 일부를 다른 현재 계정 값으로 중첩된 provider로 감싸는 것이 편리할 수 있습니다.
  • 상태 관리 : 앱이 성장함에 따라 앱 상단에 많은 상태가 가까워질 수 있습니다. 아래에 있는 많은 멀리 떨어진 컴포넌트에서 이를 변경하고 싶을 수 있습니다. context와 함께 reducer를 사용하여 복잡한 상태를 관리하고 번거로움 없이 멀리 떨어진 컴포넌트에 전달하는 것이 일반적입니다.

Context는 정적 값에만 국한되지 않습니다. 다음 렌더링에서 다른 값을 전달하면 React는 아래에서 이를 읽는 모든 컴포넌트를 업데이트합니다. 이것이 context가 상태와 함께 자주 사용되는 이유입니다.

일반적으로 트리의 다른 부분에 있는 멀리 떨어진 컴포넌트에서 일부 정보가 필요한 경우 context가 도움이 될 수 있다는 좋은 신호입니다.

profile
뚜루미
이전 포스트

React 23. Extracting State Logic into a Reducer

다음 포스트

React 25. Scaling Up with Reducer and Context

0개의 댓글