[ESLint] react/jsx-boolean-value

개요

React에서 JSX를 작성할 때, Boolean 타입의 Props에 true 값을 전달하는 방법은 두 가지가 있습니다.

// 명시적으로 true를 전달
<Hello personal={true} />

// 값을 생략하여 true를 전달
<Hello personal />

두 가지 모두 동일하게 동작하지만, 코드의 일관성을 위해 하나의 스타일로 통일하는 것이 좋습니다. JSX에서는 값을 생략하면 true로 간주하기 때문에, {true}를 생략하는 것이 더 간결하고 가독성이 좋습니다.

이번 블로그 포스트에서는 ESLint의 react/jsx-boolean-value 규칙을 사용하여 Boolean Props의 스타일을 통일하는 방법에 대해서 알아봅시다.

react/jsx-boolean-value: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-boolean-value.md

이번 블로그 포스트는 ESLint와 eslint-plugin-react가 프로젝트에 설정되어 있다는 가정하에 설명합니다.

React 프로젝트에 ESLint를 설정하는 방법에 대해서는 아래 링크를 참고하시기 바랍니다.

jsx-boolean-value

jsx-boolean-value 규칙은 JSX에서 Boolean 속성의 표기 방식을 일관되게 유지하도록 강제하는 규칙입니다. 이 규칙은 --fix 옵션으로 자동 수정이 가능합니다.

다음은 jsx-boolean-value 규칙의 기본 설정("never")에서의 예시입니다.

잘못된 예시:

<Hello personal={true} />

올바른 예시:

<Hello personal />

{true}를 생략하는 것만으로 코드가 더 간결해지고, 불필요한 코드를 줄일 수 있습니다.

jsx-boolean-value 설정

jsx-boolean-value 규칙을 설정하기 위해 .eslintrc.js(또는 ESLint 설정 파일)을 열고 다음과 같이 수정합니다.

module.exports = {
  ...
  rules: {
    ...
    'react/jsx-boolean-value': ['error', 'never'],
  },
};

옵션

jsx-boolean-value 규칙은 다음과 같은 옵션을 제공합니다.

옵션	설명
`"never"` (기본값)	`{true}` 값을 명시적으로 작성하면 에러를 표시합니다.
`"always"`	값을 생략하면 에러를 표시합니다.

"never" 옵션을 사용하면 추가로 assumeUndefinedIsFalse 옵션을 설정할 수 있습니다.

'react/jsx-boolean-value': ['error', 'never', { assumeUndefinedIsFalse: true }]

이 옵션을 true로 설정하면, Boolean Props에 {false}를 전달하는 대신 Props 자체를 생략하도록 강제합니다.

// assumeUndefinedIsFalse: true일 때

// 잘못된 예시
<Hello personal={false} />

// 올바른 예시
<Hello />

jsx-boolean-value 검사

설정을 완료한 후, 다음 명령어로 ESLint를 실행하여 검사할 수 있습니다.

npx eslint .

{true} 값이 명시적으로 작성된 곳이 있다면, 다음과 같은 에러 메시지가 표시됩니다.

error  Value must be omitted for `true` props  react/jsx-boolean-value

--fix 옵션을 사용하면 자동으로 수정할 수 있습니다.

npx eslint . --fix

자동 수정을 실행하면 {true} 값이 생략된 형태로 수정됩니다.

// 수정 전
<Hello personal={true} />

// 수정 후
<Hello personal />

Boolean Props 설계

jsx-boolean-value 규칙을 적용하면 Boolean Props를 {true} 없이 간결하게 작성할 수 있습니다. 이 규칙을 최대한 활용하려면, Boolean Props를 설계할 때도 true일 때 활성화되는 방향으로 네이밍하는 것이 좋습니다.

예를 들어, 컴포넌트의 비활성화 상태를 제어하는 Props를 설계할 때를 살펴보겠습니다.

잘못된 설계

isActive와 같은 Props를 사용하면, 비활성화 상태를 표현하기 위해 {false}를 명시적으로 전달해야 합니다.

// isActive를 사용하는 경우
<Button isActive={false} />

이렇게 하면 false를 전달하기 위해 항상 {false}를 명시해야 하므로, jsx-boolean-value 규칙의 이점을 활용할 수 없습니다.

올바른 설계

disabled와 같이 true일 때 원하는 동작이 활성화되는 방향으로 Props를 설계하면, 값을 생략하여 간결하게 작성할 수 있습니다.

// disabled를 사용하는 경우
<Button disabled />

이처럼 Boolean Props를 설계할 때는, 해당 Props가 true일 때 사용되는 빈도가 더 높은 방향으로 네이밍하면 jsx-boolean-value 규칙과 함께 더 간결한 코드를 작성할 수 있습니다.

잘못된 설계	올바른 설계
`<Modal isVisible={false} />`	`<Modal hidden />`
`<Input isActive={false} />`	`<Input disabled />`
`<Text isWrapped={false} />`	`<Text nowrap />`

완료

이번 블로그 포스트에서는 ESLint의 react/jsx-boolean-value 규칙을 사용하여 JSX에서 Boolean Props를 간결하게 작성하는 방법에 대해서 알아보았습니다. 또한, Boolean Props를 설계할 때 true일 때 활성화되는 방향으로 네이밍하면 더 간결한 코드를 작성할 수 있다는 것도 알아보았습니다.