← Back to rules

react/self-closing-comp 스타일

An auto-fix is available for this rule.

작동 방식

자식이 없는 컴포넌트를 감지하여, 불필요한 닫는 태그를 피하기 위해 스스로 닫히는 형식을 사용할 수 있도록 합니다.

왜 문제인가요?

자식이 없는 컴포넌트는 명시적인 닫는 태그가 필요하지 않습니다. 스스로 닫히는 구문을 사용하면 코드가 더 간결해지고 시각적 혼잡도가 줄어듭니다. 또한 빈 요소에 대한 일반적인 리액트 및 JSX 관례를 따릅니다.

자신의 닫힘을 포함한 공백은 허용되지만, 줄 바꿈을 포함하는 경우는 제외됩니다.

예시

이 규칙에 부적절한 코드 예시:

const elem = <Component linter="oxlint"></Component>;
const dom_elem = <div id="oxlint"></div>;
const welem = <div id="oxlint"></div>;

이 규칙에 적절한 코드 예시:

const elem = <Component linter="oxlint" />;
const welem = <Component linter="oxlint"> </Component>;
const dom_elem = <div id="oxlint" />;

구성

이 규칙은 다음 속성을 가진 구성 객체를 수락합니다.

component

type: boolean

기본값: true

사용자 정의 컴포넌트에 대해 스스로 닫히는 형식을 강제할지 여부.

html

type: boolean

기본값: true

기본 HTML 요소에 대해 스스로 닫히는 형식을 강제할지 여부.

사용 방법

이 규칙을 설정 파일 또는 CLI를 통해 활성화하려면 다음을 사용할 수 있습니다:

설정 (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/self-closing-comp": "error"
  }
}

CLI

oxlint --deny react/self-closing-comp --react-plugin

참고 자료

• 규칙 소스