컴포넌트안에 컴포넌트안에 컴포넌트안에 컴포넌트안에

들어가며

항상 프로젝트를 시작 할 때하다 더 좋은 코드, 더 좋은 구조 등의 코드를 작성하리라 다짐하지만, 시간이 지날수록 임박하는 데드라인, 자주 바뀌는 기획으로 인해 복잡성이 증가하고 가독성이 떨어지는 순간이 많아졌습니다.
이러한 문제를 해결하기 위해서 좋은 코드를 작성하려는 노력보단 나쁜 코드를 피하기 위해 안티패턴에 대해 공부한 내용을 작성하려 합니다.

컴포넌트 안에 컴포넌트를 만드는 것은 나쁜 습관인가요?

React에서는 중첩된 컴포넌트를 만들 수 있지 않나요?
다른 컴포넌트 안에 컴포넌트를 만드는 것은 편리해 보일 수 있지만 몇 가지 문제가 발생할 수 있습니다.

export default function ParentComponent(props) {
  function InnerComponent() {
    // ...
  }

  return (
    <>
      <InnerComponent />
    </>
  );
}

우선, 중첩된 컴포넌트는 부모 컴포넌트와 긴밀하게 결합되어 재사용성이 떨어집니다.
내부 컴포넌트는 내보내서 재사용할 수 없고, 대신 다른 컴포넌트에 소품으로 전달되어 모듈식 코드가 줄어듭니다.

또한 컴포넌트 내에서 컴포넌트를 만들면 성능 문제가 발생할 수 있습니다. 내부 컴포넌트의 선언 함수는 상위 컴포넌트의 렌더링 주기마다 다시 생성됩니다. 이로 인해 프로젝트의 규모가 커질수록 성능에 영향이 갈 수 있습니다.

React에서는 중첩 컴포넌트 생성을 명시적으로 금지하지는 않지만 일반적으로 다른 컴포넌트 내에서 컴포넌트를 생성하지 않는 것이 좋습니다.
반면에 컴포넌트를 독립적으로 선언하여 관리하면 모듈성과 재사용성을 보장할 수 있습니다.

다른 파일에 별도의 컴포넌트를 만든 다음 다른 컴포넌트에서 import 하는 방식으로 이를 방지할 수 있습니다.

const InnerComponent = (props) => {
	// ...
}

export default InnerComponent;

import InnerComponent from './InnerComponent';

const ParentComponent = (props) => {
  return (
    <>
      <InnerComponent />
    </>
  );
}

export default ParentComponent;

그렇다면 중첩 컴포넌트는 절대 사용하면 안되나요?

그런것만은 아닙니다. 위에서 예시를 든 경우는 부모-자식 컴포넌트 각각 어느정도의 기능을 가지고 있다는 가정하에 작성한 것입니다.
부모 컴포넌트 내에서만 작동하거나, 일회성으로만 작성되는 컴포넌트들은 부모 컴포넌트 내에 작성해도 무관하다고 생각합니다.
아래와 같이 간단한 컴포넌트는 작성해도 무관하다 생각합니다.

const ParentComponent = ({ data }) => {
  const InnerComponent = () => {
    return <div>Chart with data: {data.count}</div>;
  }

  return (
    <div>
      <h2>Dashboard</h2>
      <InnerComponent />
    </div>
  );
}