2024.08.29

 

"react/prop-types": "off"

ESLint 설정 파일에서 사용되는 구문으로,

React 애플리케이션에서 PropTypes 유효성 검사를 비활성화하는 설정을 의미합니다.

'react/prop-types': ['off'],

 

PropTypes

React에서 컴포넌트가 받는 props의 데이터 타입을 검사하기 위해 사용되는 유효성 검사 도구 입니다.

 

PropTypes를 사용하면 컴포넌트가 받는 props의 타입을 명시적으로 정의할 수 있으며,

개발 중에 올바른 타입의 props가 전달되지 않았을 때 / 경고 메시지를 표시하여 잠재적인 버그를 예방할 수 있습니다.

 

import PropTypes from 'prop-types';

function MyComponent({ name, age }) { // props => name, age
  return (
    <div>
      <h1>{name}</h1>
      <p>{age}</p>
    </div>
  );
}

MyComponent.propTypes = {
  name: PropTypes.string.isRequired, // name -> string타입
  age: PropTypes.number.isRequired, // age -> number타입
};

이 코드에서는 `MyComponent`가 `name`과 `age`라는 두개의 props를 요구하며,

각각 `string`과 `number`타입이어야 한다고 명시하고 있습니다.

 

 

 

 

ESLint와 "react/prop-types": "off" 설정

 

ESLint

JS코드에서 오류와 스타일 문제를 자동으로 찾아주는 정적 코드 분석 도구입니다.

 

React 프로젝트에서 ESLint를 설정할 때, "react/props-types" 규칙은

컴포넌트에서 PropTypes가 사용되고 있는지를 확인하고, 사용하지 않을 경우 경고를 출력합니다.

 

그러나, TypeScript를 사용하거나 다른 타입 검사 방법을 사용하는 경우, (예: TypeScript 인터페이스 또는 클래스)

PropTypes를 사용하지 않게 될 수도 있습니다.

 

이럴 때, PropTypes 검사를 비활성화하기 위해

ESLint 설정 파일에서 "react/prop-types"규칙을 "off"로 설정할 수 있습니다.

 

ESLint는 React 컴포넌트에서 PropTypes가 정의되어 있지 않더라도 더 이상 경고를 표시하지 않습니다.

이는 PropTypes를 사용하지 않거나 다른 방법으로 타입 검사를 관리 할 때 유용합니다.

 

 

---

https://hini7.tistory.com/149

[ESLint] React hook + Typescript 프로젝트 시 설정한 rule 공유