[ESLint] Prop spreading is forbiddeneslintreact/jsx-props-no-spreading

 

 

 

아래처럼 props를 펼침연산자(spread operator)를 쓰는 것도 ESLint에서 권장하는 패턴은 아니다. 코드의 가독성과 유지보수를 위해서는 어떤 prop을 내려주고 있는지 일일이 명시하는 것이 좋다. 

Disallow JSX props spreading (react/jsx-props-no-spreading)
Enforces that there is no spreading props for any JSX attribute. This enhances readability of code by being more explicit about what props are received by the component. It is also good for maintainability by avoiding passing unintentional extra props and alllowing react to emit warnings when invalid HTML props are passed to HTML elemements.

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

 

아래처럼 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} />

Rule Options

"react/jsx-props-no-spreading": [<enabled>, {
    "html": "ignore" | "enforce",
    "custom": "ignore" | "enforce",
    "explicitSpread": "ignore" | "enforce",
    "exceptions": [<string>]     
}]
...

 

https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-props-no-spreading.md

GitHub - yannickcr/eslint-plugin-react: React specific linting rules for ESLint