React에서 중첩 컴포넌트에 정보를 전달하는 방법

React에서 중첩된 컴포넌트로 정보 전달하는 방법

React에서 부모 컴포넌트로부터 깊이 중첩된 자식 컴포넌트로 정보를 전달하는 것은 도전적일 수 있습니다. 하지만 이를 달성하기 위해 여러 기술을 사용할 수 있습니다. 이 블로그 포스트에서는 두 가지 주요 옵션인 context와 props 사용 방법을 알아보겠습니다.

컴포넌트 계층 구조에서 Props 전달하기

하나의 접근 방법은 props를 명시적으로 컴포넌트 계층 구조 아래로 전달하는 것입니다. 이러한 구조를 가진다고 가정해봅시다:

<Component1>
  <Component2>
    <Component3>
      <Component4>

Component1에서 Component4로 무언가를 전달하려면 각 컴포넌트를 통해 props를 전달해야 합니다:

<Component1 propOne={propOne}>
  <Component2 propOne={propOne}>
    <Component3 propOne={propOne}>
      <Component4 propOne={propOne} />
    </Component3>
  </Component2>
</Component1>

이 접근 방식은 작동하지만, 중첩된 컴포넌트의 수가 많아질수록 번거로워질 수 있습니다.

React Context API 사용하기

다른 옵션은 React의 Context API를 사용하는 것입니다. 하지만, 이 API는 React의 후속 버전에서 변경될 수 있음을 주의해야 합니다. 다음은 Component1에서 Component4로 정보를 전달하기 위해 Context API를 사용하는 예시입니다:

// COMPONENT 1
class Component1 extends React.Component {
  getChildContext() {
    return {
      yourProp: "someValue"
    };
  }

  render() {
    return <Component2 />;
  }
}

Component1.childContextTypes = {
  yourProp: PropTypes.string
};

// COMPONENT 4
class Component4 extends React.Component {
  render() {
    return <div>{this.context.yourProp}</div>;
  }
}

Component4.contextTypes = {
  yourProp: PropTypes.string
};

이 접근 방식에서는 Component1에서 컨텍스트를 정의하고 컴포넌트 계층 구조로 전달합니다. Component4에서는 context 속성을 사용하여 정보에 접근할 수 있습니다.

결론

React에서 중첩된 컴포넌트로 정보를 전달하기 위해서는 props를 컴포넌트 계층 구조 아래로 전달하거나 Context API를 사용해야 할 수 있습니다. 두 가지 방법 모두 장단점이 있으며, 선택은 특정 사용 사례에 따라 달라집니다. API의 안정성과 잠재적인 변경 사항을 고려하여 이 두 가지 옵션 중에서 선택하는 것이 중요합니다. 정보를 효과적으로 전달하는 방법을 이해함으로써 보다 유연하고 유지보수하기 쉬운 React 컴포넌트를 구축할 수 있습니다.

참고 자료 : 

reactjs