← Back to rules

react/jsx-no-useless-fragment Pedantic

💡 A suggestion is available for this rule.

무엇을 하는가

불필요한 프래그먼트를 금지합니다.

왜 나쁜가요?

프래그먼트는 여러 자식 요소를 그룹화할 때 DOM 트리에 노드를 추가하지 않고도 유용한 도구입니다. 그러나 때로는 단일 자식 요소를 가진 프래그먼트를 사용하게 됩니다. 이 자식 요소가 요소, 문자열 또는 표현식이라면 프래그먼트를 사용할 필요가 없습니다.

예시

이 규칙에 대한 잘못된 코드 예시:

<>foo</>
<div><>foo</></div>

이 규칙에 대한 올바른 코드 예시:

<>foo <div></div></>
<div>foo</div>

구성

이 규칙은 다음 속성을 가진 구성 객체를 받습니다.

allowExpressions

type: boolean

기본값: false

단일 표현식 자식을 가진 프래그먼트를 허용합니다.

사용 방법

설정 파일이나 명령줄 인터페이스에서 이 규칙을 활성화하려면 다음과 같이 사용할 수 있습니다:

Config (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/jsx-no-useless-fragment": "error"
  }
}

CLI

oxlint --deny react/jsx-no-useless-fragment --react-plugin

참고 자료

• 규칙 소스