[React] ESLint 구성 및 prop-types 경고 해결하기

안녕하세요, 여러분! 오늘은 React 프로젝트에서 자주 마주치는 eslint와 prop-types 관련된 문제를 해결하는 방법에 대해 알아보겠습니다. 시작해 볼까요?

ESLint

ESLint란?

ESLint는 코드를 더 깔끔하고 효율적으로 작성할 수 있게 도와주는 Linter 도구입니다. React 앱에서는 이미 프로젝트에 설치되어 있으며, 프로젝트 루트에 eslintrc.cjs 파일이 있습니다. 이 파일은 ESLint에 특정한 플러그인을 사용하라고 알려주며, React에 필요한 규칙을 설정해 놓아 시간을 절약해 줍니다.

 

prop-types 경고 해결

마주친 문제 중 하나는 prop-types 관련 경고였습니다. 이 경고는 프로퍼티 유효성 검사가 누락되었을 때 발생합니다. 이를 해결하기 위해서는 prop-types 패키지를 사용하여 실제 프로퍼티의 유형을 지정해야 합니다. 그러나 최근에는 prop-types를 사용하지 않는 추세이며, ESLint에서는 이에 대한 경고를 띄우고 있습니다.

 

prop-types 경고 끄기

경고를 끄는 방법 중 하나는 ESLint 구성 파일(eslintrc.cjs)에서 해당 규칙을 조정하는 것입니다. 다음과 같이 설정하면 해당 경고를 끌 수 있습니다:

// eslintrc.cjs

module.exports = {
  // 다른 설정들...
  rules: {
    // 다른 규칙들...
    'react/prop-types': 'off',
  },
};

 

다음글에서는 prop-types를 사용하는 방법에 대해 알아보겠습니다. prop-types는 현재 사용량이 줄어들고 있는 툴이지만, 여전히 일부 프로젝트에서는 유용하게 사용될 수 있습니다. 그리고 요즘에는 TypeScript를 많이 사용하고 있어 유형 검사에 대한 다양한 옵션을 고려해 볼 필요가 있습니다.

이렇게 ESLint와 prop-types에 대한 간단한 해결 방법을 살펴보았습니다. 계속해서 React 개발에 필요한 다양한 도구와 기술에 대해 알아가세요!