문자열 값인 props에는 중괄호를 피하기
React에서 props를 전달할 때 중괄호를 이용하여 전달하고자 하는 데이터를 담습니다.
하지만 문자열 값인 props는 별도의 중괄호 없이 쌍따옴표만 이용하여 전달할 수 있습니다.
// Bad
<Paragraph variant={"h5"} heading={"A new book"} />
// Good
<Paragraph variant="h5" heading="A new book" />이를 프로젝트 전체에 적용하기 위해 ESLint 규칙을 적용해봅시다.
ESLint Rule 설정하기
먼저, React와 관련된 규칙을 정의한 eslint-plugin-react 패키지를 설치해 줍니다.
npm install eslint-plugin-react --save-dev
yarn add eslint-plugin-react --dev
eslint-plugin-react관련 plugins 옵션이나 extends 옵션에 대한 설명은 본 내용에서 다루지 않습니다.
자세한 내용은 링크에서 참고해주세요.
그리고 react/jsx-curly-brace-presence 규칙을 추가해봅시다.
react/jsx-curly-brace-presence
react/jsx-curly-brace-presence는 ESLint 규칙 중 하나로, JSX 문법에서 props나 children에 중괄호({}) 사용 방식을 제어하는 규칙입니다.
Rule Options
...
"react/jsx-curly-brace-presence": [<enabled>, { "props": <string>, "children": <string>, "propElementValues": <string> }]
...이 규칙은 다음과 같은 세 가지 옵션을 가지고 있습니다:
always: JSX props, children 및 prop values에 항상 중괄호를 사용합니다.never: JSX props, children 및 prop values에 불필요한 중괄호를 제거합니다.ignore: JSX props, children 및 prop values에 적용된 규칙을 무시합니다.
이 규칙은 항상 쌍따옴표를 사용합니다.
예시
{ props: "always", children: "always" }
// Before
<App>Hello world</App>;
<App prop='Hello world'>{'Hello world'}</App>;
// Fixed
<App>{"Hello world"}</App>;
<App prop={"Hello world"}>{'Hello world'}</App>;{ props: "never", children: "never" }
// Before
<App>{'Hello world'}</App>;
<App prop={'Hello world'} attr={"foo"} />;
// Fixed
<App>Hello world</App>;
<App prop="Hello world" attr="foo" />;{ props: "always", children: "always", "propElementValues": "always" }
// Before
<App prop=<div /> />;
// Fixed
<App prop={<div />} />;{ props: "never", children: "never", "propElementValues": "never" }
// Before
<App prop={<div />} />;
// Fixed
<App prop=<div /> />;실제 적용한 설정
// .eslintrc.json
{
...
"rules": {
...
"react/jsx-curly-brace-presence": [
"error",
{ "props": "never", "children": "never" }
],
}
}적용 결과
일괄 적용 끝!
마무리
- 지금 진행 중인 프로젝트에는 문자열 값인 props에도 항상 중괄호를 사용했습니다. 그 이유는 모든 props에 중괄호를 똑같이 적용하고 싶었고, 중괄호를 사용하는 것이 요소의 기본 속성과 props를 중괄호 사용 여부를 통해 명시적으로 구분하고 싶었습니다.
- 뭐.. props가 아니어도 중괄호를 사용하지만.. 제 마음 속으로 그렇게 정했습니다.
- React Clean Code와 React Best Practice에는 문자열 값인 props는 쌍따옴표를 사용하는 것이 더 좋다는 내용을 담고 있습니다.
- 그리하야 적용하게된 ESLint Rule 입니다. 쨔쟌~
- props에 중괄호를 사용하면 메모리에서 할당이 일어나 성능에 엄청난 차이는 아니지만 약간의 차이가 있다고 이야기를 들었는데 관련 내용을 못찾았습니다.. 혹시 참고할 만한 링크.. 알고 계신 분 있나요? 👀
참고
