React에서 Component.SubComponent 구현하기

React: Component.SubComponent 구현 방법

React 컴포넌트를 다룰 때, MyComp.MySubComp 문법을 볼 수도 있습니다. 이 구조는 메인 컴포넌트 내에서 서브 컴포넌트에 접근할 수 있게 해줍니다. 이 블로그 포스트에서는 React에서 Component.SubComponent 문법을 어떻게 구현하는지와 그 용어에 대해 알아보겠습니다.

MyComp.MySubComp 구현하기

일반적인 경우, MySubComp은 MyComp의 정적(class) 멤버입니다. MyComp.MySubComp 문법을 사용하기 위해서는 다음 단계를 따를 수 있습니다:

export default class MyComp extends Component {
  // ... 컴포넌트 로직 ...
}

MyComp.MySubComp = class MySubComp extends Component {
  // ... 서브 컴포넌트 로직 ...
}

서브 컴포넌트를 메인 컴포넌트의 클래스 멤버로 할당함으로써, MyComp.MySubComp 문법을 사용하여 쉽게 접근할 수 있습니다.

MyComp.MySubComp 사용하기

MyComp.MySubComp 구조를 구현한 후, 메인 컴포넌트 내에서 서브 컴포넌트를 사용할 수 있습니다.

클래스 컴포넌트를 사용하는 경우:

import React from 'react';
import MyComp from 'my-comp';

const MySubComp = MyComp.MySubComp;

class Page extends React.Component {
  render() {
    return (
      <MyComp>
        <MySubComp/>
      </MyComp>
    );
  }
}

함수형 컴포넌트를 사용하는 경우:

import React from 'react';
import MyComp from 'my-comp';

const MySubComp = MyComp.MySubComp;

const Page = () => {
  return (
    <MyComp>
      <MySubComp/>
    </MyComp>
  );
};

또한, 서브 컴포넌트를 익명 함수로 직접 정의할 수도 있습니다:

import React from 'react';
import MyComp from 'my-comp';

MyComp.MySubComp = () => <div>서브 컴포넌트</div>;

const Page = () => {
  return (
    <MyComp>
      <MyComp.MySubComp/>
    </MyComp>
  );
};

MyComp.MySubComp 문법을 사용할 때, 첫 번째 부분은 서브 컴포넌트의 이름이며, 두 번째 부분은 실제 컴포넌트의 이름을 나타냅니다. React Dev Tools를 사용하여 컴포넌트를 확인할 때 이 구분이 특히 유용합니다.

마무리

이 글에서는 React에서 Component.SubComponent 문법을 구현하고 사용하는 방법에 대해 알아보았습니다. 용어를 이해하고 제공된 예제를 따라하면 React 애플리케이션에서 서브 컴포넌트를 쉽게 생성하고 사용할 수 있습니다.

참고 자료 : 

reactjs