← Back to rules

react/jsx-props-no-spreading 스타일

작동 방식

JSX 속성 전개를 허용하지 않음

왜 좋지 않은가?

모든 JSX 속성에 대해 전개가 허용되지 않도록 강제합니다. 이는 컴포넌트가 어떤 속성을 받는지 명확하게 하여 코드의 가독성을 높입니다.
또한 의도치 않은 추가 속성을 전달하는 것을 방지하여 유지보수성 또한 향상시키며, 잘못된 HTML 속성이 HTML 요소에 전달될 경우 리액트에서 경고 메시지를 출력할 수 있도록 합니다.

예시

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

<App {...props} />
<MyCustomComponent {...props} some_other_prop={some_other_prop} />
<img {...props} />

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

const {src, alt} = props;
const {one_prop, two_prop} = otherProps;
<MyCustomComponent one_prop={one_prop} two_prop={two_prop} />
<img src={src} alt={alt} />

구성

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

custom

type: "ignore" | "enforce"

기본값: "enforce"

custom을 ignore로 설정하면 App, MyCustomComponent 등과 같은 사용자 정의 JSX 태그에 대해 검사를 무시합니다. 기본값은 enforce입니다.

exceptions

type: string[]

기본값: []

예외 항목은 특정 컴포넌트에 대한 강제 적용 동작을 반전합니다.
예를 들어:

• html이 ignore로 설정되면, div에 대한 예외는 <div> 요소에 대해 이 규칙을 적용합니다.
• custom이 enforce로 설정되면, Foo에 대한 예외는 <Foo> 컴포넌트에 대해 이 규칙을 무시합니다.

이를 통해 개별 컴포넌트에 대해 일반 설정을 재정의할 수 있습니다.

explicitSpread

type: "ignore" | "enforce"

기본값: "enforce"

explicitSpread를 ignore로 설정하면, 해당 전개 내에서 객체의 모든 속성이 명시적으로 나열된 전개 연산자를 무시합니다. 기본값은 enforce입니다.

html

type: "ignore" | "enforce"

기본값: "enforce"

html을 ignore로 설정하면 div, img 등 모든 기본 HTML JSX 태그에 대해 검사를 무시합니다. 기본값은 enforce입니다.

사용 방법

이 규칙을 설정 파일 또는 CLI를 통해 활성화하려면 다음을 사용하세요:

설정 (.oxlintrc.json)

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

CLI

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

참고 자료

• 규칙 소스