← Back to rules

react/no-multi-comp 제한

작동 방식

같은 파일 내에서 여러 개의 리액트 컴포넌트를 정의하는 것을 방지합니다.

왜 문제가 되는가?

단일 파일 내에서 여러 컴포넌트를 선언하면 코드베이스 탐색 및 유지보수를 더 어렵게 만들 수 있습니다. 각 컴포넌트는 이상적으로는 별도의 파일에 위치하여 보다 나은 조직성과 재사용성을 확보해야 합니다.

예시

이 규칙에 부적절한 예시:

function Foo({ name }) {
  return <div>안녕하세요 {name}</div>;
}

function Bar({ name }) {
  return <div>다시 안녕하세요 {name}</div>;
}

이 규칙에 적절한 예시:

function Foo({ name }) {
  return <div>안녕하세요 {name}</div>;
}

구성

ignoreStateless

type: boolean

기본값: false

true로 설정된 경우, 상태 없는 컴포넌트를 무시하고 동일한 파일 내에서 여러 상태 없는 컴포넌트를 허용합니다. 또는 상태 있는 컴포넌트 하나와 상태 없는 컴포넌트 하나 이상을 동일한 파일 내에서 허용할 수 있습니다.

상태 없는 컴포넌트는 기본적으로 함수형 컴포넌트를 의미하며, memo와 forwardRef를 통해 생성된 컴포넌트도 포함됩니다.

사용 방법

이 규칙을 구성 파일이나 명령줄 인터페이스를 통해 활성화하려면 다음을 사용할 수 있습니다:

구성 파일 (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/no-multi-comp": "error"
  }
}

CLI

oxlint --deny react/no-multi-comp --react-plugin

참고 자료

• 규칙 소스