React 코드의 완성도를 높이는 PropTypes와 ESLint의 만남

React로 프로젝트를 진행할 때, ESLint가 아래와 같은 경고를 띄울 때가 있다.

'react/prop-types': 'desc' is missing in props validation

 

이 글에서는 이 경고가 왜 발생하는지, 그리고 어떻게 해결할 수 있는지를 정리한다. 또한 prop-types의 개념과 함께 예시를 통해 props 검증의 기본을 다져보려 한다.

 

 

 

경고의 원인

 

React에서 컴포넌트는 부모로부터 props를 받아 렌더링을 수행한다.

기본적으로 props의 타입은 자유롭지만, 타입이 예상과 다르면 의도하지 않은 동작이나 오류가 발생할 수 있다.

 

이를 방지하기 위해 ESLint의 react/prop-types 규칙은 props의 타입을 명시하도록 요구한다.

 

props 타입을 명시하지 않으면, 위와 같은 경고가 발생한다.

 

 

 

경고 해결: prop-types 사용

 

prop-types는 props의 타입을 런타임에서 검증해주는 React의 공식 라이브러리이다.
먼저 prop-types를 설치해야 한다.

npm install prop-types

 

설치가 끝나면, 컴포넌트에 아래와 같이 props의 타입을 정의할 수 있다.

 

 

 

기본적인 사용 예시

 

아래는 Header 컴포넌트에서 desc라는 props를 문자열로 정의한 예시이다.

import React from 'react';
import PropTypes from 'prop-types';

function Header({ desc }) {
    return (
        <div>
            {desc ? <p>{desc}</p> : <h1>Login</h1>}
        </div>
    );
}

// desc를 문자열(string)로 정의
Header.propTypes = {
    desc: PropTypes.string
};

export default Header;

 

이렇게 하면 ESLint 경고가 사라지고, props의 타입 검증이 수행된다.

 

 

 

prop-types의 다양한 예시

 

prop-types는 문자열뿐 아니라 다양한 타입 검증을 지원한다. 아래는 자주 사용하는 예시이다.

import PropTypes from 'prop-types';

MyComponent.propTypes = {
    // 기본 타입
    name: PropTypes.string,
    age: PropTypes.number,
    isActive: PropTypes.bool,

    // 배열
    items: PropTypes.array,

    // 객체
    user: PropTypes.object,

    // 함수
    onClick: PropTypes.func,

    // 특정 형태의 객체
    settings: PropTypes.shape({
        theme: PropTypes.string,
        darkMode: PropTypes.bool
    }),

    // 필수값으로 지정 (isRequired)
    email: PropTypes.string.isRequired,

    // 여러 타입 중 하나 허용
    status: PropTypes.oneOf(['active', 'pending', 'disabled']),

    // 배열 요소 타입 지정
    tags: PropTypes.arrayOf(PropTypes.string)
};

 

 

 

isRequired의 의미

 

isRequired를 사용하면, 해당 props가 반드시 존재해야 함을 명시할 수 있다.

 

예를 들어 아래처럼 정의하면, email이 전달되지 않을 때 경고가 발생한다.

MyComponent.propTypes = {
    email: PropTypes.string.isRequired
};

 

 

 

 

prop-types와 TypeScript의 비교

 

prop-types는 런타임에서 props의 타입을 검사한다.

 

반면, TypeScript는 컴파일 타임에 타입을 검증하기 때문에 더 강력한 타입 안전성을 제공한다.

 

TypeScript를 사용하는 경우라면 prop-types 대신 TypeScript의 인터페이스나 타입을 사용하면 된다.

 

 

 

정리

• react/prop-types 경고는 props의 타입을 명시하지 않았기 때문에 발생한다.
• prop-types를 사용하여 props의 타입을 정의하면 경고가 사라지고, 유지보수와 디버깅이 쉬워진다.
• 다양한 예시를 참고하여 프로젝트의 요구사항에 맞게 props 검증을 설정할 수 있다.
• 타입 검증은 작은 습관이지만, 코드의 품질과 안정성을 높이는 중요한 부분이다.

 

오늘도 한 단계 성장!