← Back to rules

react/jsx-max-depth 스타일

작동 방식

중첩된 JSX 요소 및 프래그먼트의 최대 깊이를 강제합니다.

왜 문제가 될까?

과도하게 중첩된 JSX는 컴포넌트를 더 읽기 어렵고 유지보수하기 어렵게 만듭니다.

예시

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

const Component = () => (
  <div>
    <div>
      <div>
        <span />
      </div>
    </div>
  </div>
);

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

const Component = () => (
  <div>
    <div>
      <span />
    </div>
  </div>
);

구성

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

max

type: integer

기본값: 2

허용되는 중첩된 JSX 요소 및 프래그먼트의 최대 깊이입니다.

사용 방법

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

구성 (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/jsx-max-depth": "error"
  }
}

CLI

oxlint --deny react/jsx-max-depth --react-plugin

참고자료

• 규칙 소스