[React] 자주 사용하는 Eslint Rules

배경

React 프로젝트를 개발하면서 자주 사용하는 eslint rule를 있지만 매번 까먹고 매번 다시 찾는게 귀찮아서 정리해본다. 나는 react/no-unused-vars 는 빨간 줄이 너무 거슬려서 off 한다. JSX 컴포넌트의 프로퍼티를 정렬해주는 react/jsx-sort-props도 가독성 측면에서 유용하다.

 

다음의 rule들을 React 프로젝트의 .eslintrc.[json, cjs] 의 rules에 추가하면 된다. 이러한 규칙은 React 프로젝트에서 코드 품질을 향상시키고 가독성을 높이며, 접근성을 개선하는 데 도움이 된다.

 

자주 사용하는 Eslint Rules

1. react/jsx-sort-props: JSX 프로퍼티를 알파벳 순서로 정렬하도록 하는 규칙이다. 코드의 일관성을 유지하고 가독성을 높이기 위해 사용된다. 예를 들어, <Component b={2} a={1} /> 대신 <Component a={1} b={2} />로 정렬된다.
2. no-unused-vars: 사용하지 않는 변수를 경고하는 규칙으로, 선언한 변수가 사용되지 않으면 경고 메시지를 표시한다. 코드의 불필요한 변수 선언을 방지하고 가독성을 향상시킨다.
3. react/prop-types: React 컴포넌트의 프로퍼티(props) 유형을 정의하도록 하는 규칙이다. 프로퍼티 유형을 정의하면 컴포넌트 사용 시 타입 오류를 방지하고 문서화에 도움이 된다.
4. react/no-unused-prop-types: 사용하지 않는 React 프로퍼티 타입을 경고하는 규칙이다. react/prop-types과 함께 사용하여 사용되지 않는 프로퍼티 타입을 식별한다.
5. react/no-array-index-key: 배열 요소를 렌더링할 때 key로 배열의 인덱스를 사용하지 않도록 경고하는 규칙이다. 배열의 고유 식별자(key)를 사용하여 React 성능을 최적화하는 데 도움이 된다.
6. react/react-in-jsx-scope: JSX 코드를 작성할 때 React를 import하지 않으면 경고하는 규칙이다. JSX 코드 내에서 React 컴포넌트를 사용할 때 필요한 규칙이다.
7. react-hooks/rules-of-hooks: React 훅을 올바르게 사용하는지 확인하는 규칙이다. React 함수 컴포넌트 내에서 훅 규칙을 따르지 않으면 경고 메시지를 표시한다.
8. jsx-a11y/alt-text: 이미지 요소에 대체 텍스트(alt 속성)를 제공하지 않으면 경고하는 규칙이다. 웹 접근성을 높이기 위한 규칙 중 하나로, 시각 장애인을 위한 텍스트 설명을 제공한다.
9. jsx-a11y/click-events-have-key-events: 클릭 가능한 요소에 키 이벤트를 제공하지 않으면 경고하는 규칙이다. 접근성을 향상시키기 위해 클릭 이벤트와 함께 키 이벤트도 제공하는 것이 좋다.
10. jsx-a11y/label-has-for: 폼 요소와 레이블을 연결하지 않으면 경고하는 규칙이다. 접근성을 높이기 위해 레이블과 폼 요소를 연결하여 화면 낭독기가 폼을 이해할 수 있도록 한다.

 

.eslintrc.cjs

module.exports = {
  root: true,
  env: { browser: true, es2020: true },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:react/jsx-runtime',
    'plugin:react-hooks/recommended',
  ],
  ignorePatterns: ['dist', '.eslintrc.cjs'],
  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
  settings: { react: { version: '18.2' } },
  plugins: ['react-refresh', 'react', 'react-hooks', 'prettier', 'import'],
  rules: {
    'react-refresh/only-export-components': [
      'warn',
      { allowConstantExport: true },
    ],
    'react/jsx-sort-props': 'warn',
    'no-unused-vars': 'warn',
  },
};