React 프로젝트 ESLint·Prettier 설정 추천

소개

React 개발에서 코드 스타일과 정적 분석은 유지보수성과 협업 효율에 큰 영향을 준다. ESLint는 코드 품질과 잠재적 오류를 잡아주며 Prettier는 포맷을 자동으로 맞춘다. 두 도구를 함께 쓰면 컨벤션 충돌을 줄이고 코드 리뷰 시간을 단축할 수 있다. 이 글은 초보자도 이해하기 쉽도록 설치부터 통합 예제까지 단계별로 설명한다.

왜 ESLint와 Prettier를 함께 쓰나

ESLint는 오류와 잠재적 버그를 찾는 데 강하다. 반면 Prettier는 일관된 코드 포맷을 강제한다. 단독 사용 시 규칙 충돌이 발생할 수 있어서 통합 구성이 필요하다. 아래 핵심 이유를 정리한다.

핵심 장점

• 코드 스타일이 일관되어 리뷰가 쉬워짐
• 잠재적 버그를 사전에 탐지
• 자동 포맷으로 개발자 간 스타일 논쟁 최소화

설치

다음 패키지를 devDependencies로 설치한다. yarn 또는 npm 사용 가능하다.

npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/parser @typescript-eslint/eslint-plugin

기본 ESLint 구성

ESLint 설정은 프로젝트 성격에 따라 달라진다. 아래 예제는 React(자바스크립트) 기준의 권장 설정이다.

module.exports = {
  env: { browser: true, es2021: true },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
    'plugin:prettier/recommended'
  ],
  parserOptions: { ecmaFeatures: { jsx: true }, ecmaVersion: 12, sourceType: 'module' },
  plugins: ['react', 'react-hooks', 'prettier'],
  rules: {
    'prettier/prettier': 'error',
    'react/prop-types': 'off',
    'no-console': ['warn', { allow: ['warn', 'error'] }]
  },
  settings: { react: { version: 'detect' } }
};

Prettier 설정

Prettier는 포맷에만 집중한다. 프로젝트에서 기본 포맷 규칙을 아래처럼 선언한다.

{
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "semi": true
}

ESLint와 Prettier 충돌 방지

eslint-config-prettier는 ESLint 규칙 중 포맷 관련 규칙을 비활성화한다. plugin:prettier/recommended를 extends에 추가하면 ESLint에서 Prettier 규칙을 검증하고 충돌을 줄일 수 있다. 위 .eslintrc 예제에서 이 구성을 적용했다.

실전 적용 예제

간단한 React 컴포넌트 예제를 통해 포맷과 규칙 적용 결과를 보자. JSX의 <와 >는 이스케이프 처리되어 있다.

import React from 'react';

function Hello({ name }) {
  return (
    <div className="hello-wrapper">
      <h1>Hello, {name}!</h1>
    </div>
  );
}

export default Hello;

에디터 통합

VSCode 사용 시 확장과 설정으로 자동 저장 시 lint와 포맷을 실행하면 일관된 환경을 유지할 수 있다. 예를 들어 .vscode/settings.json에 아래를 추가한다.

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": { "source.fixAll.eslint": true },
  "eslint.validate": ["javascript", "javascriptreact"]
}

npm 스크립트

CI와 로컬 검사용 스크립트를 패키지에 추가하면 일관된 검사가 가능하다.

"scripts": {
  "lint": "eslint 'src/**/*.{js,jsx}'",
  "lint:fix": "eslint 'src/**/*.{js,jsx}' --fix",
  "format": "prettier --write 'src/**/*.{js,jsx,css,json,md}'"
}

권장 규칙 요약

• prettier/prettier: error — 포맷 위반을 에러로 처리
• react-hooks/rules-of-hooks: error — 훅 규칙 강제
• react-hooks/exhaustive-deps: warn — 의존성 배열 경고
• no-console: warn — 불필요한 console 사용 경고

마무리

설정은 프로젝트에 맞게 조정해야 한다. 우선 위 구성으로 시작하면 대부분의 충돌을 피할 수 있다. CI에서 lint와 format 검사를 실행하면 품질을 지속적으로 유지할 수 있다. 특히 팀에서 일관된 코드 스타일을 원하면 prettier react 통합과 react eslint 설정 예제를 참고하여 설정을 표준화하는 것을 권장한다.