← Back to rules

react/jsx-no-duplicate-props 정확성

작동 방식

이 규칙은 JSX 요소 내 중복된 속성을 방지합니다.

왜 문제가 될까?

JSX 요소에 중복된 속성이 존재하는 것은 대부분 오류일 가능성이 큽니다. 중복된 속성을 가진 JSX 요소를 생성하면 애플리케이션에서 예기치 않은 동작이 발생할 수 있습니다.

예시

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

<App a a />;
<App foo={2} bar baz foo={3} />;

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

<App a />;
<App bar baz foo={3} />;

eslint-plugin-react와의 차이점

이 규칙은 ignoreCase 옵션을 지원하지 않습니다. 대소문자가 다른 속성은 서로 구분되며, 중복으로 경고되지 않습니다 (예: <App foo Foo />는 허용됨). 이는 JSX에서 속성이 대소문자를 구분하기 때문에 의도적인 설계입니다.

사용 방법

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

Config (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/jsx-no-duplicate-props": "error"
  }
}

CLI

oxlint --deny react/jsx-no-duplicate-props --react-plugin

참고자료

• 규칙 소스