노마드코더 ReactJS로 영화 웹 서비스 만들기 04 무료강좌

노마드코더 ReactJS로 영화 웹 서비스 만들기 04 무료강좌

​

PropTypes 란?

PropTypes는 React에서 컴포넌트의 props가 올바른 타입인지 확인하기 위한 도구입니다.

이를 통해 컴포넌트가 예상치 못한 props를 받아 발생할 수 있는 오류를 방지할 수 있습니다.

PropTypes를 사용하는 이유

1. 문서화: props의 타입과 사용법을 명시적으로 알 수 있습니다.
2. 오류 방지: 잘못된 props를 전달했을 때 경고를 띄워줍니다.
3. 유지보수 용이: props의 예상 타입을 명확히 정의하여 코드 가독성을 높입니다.

코드 설명

•  
• text: PropTypes.string.isRequired
  • text는 문자열(string)이어야 하며, 필수(isRequired)로 전달해야 합니다.
• fontSize: PropTypes.number.isRequired
  • fontSize는 숫자(number)이어야 하며, 필수입니다.

Btn.propTypes = { 
	text: PropTypes.string.isRequired, // text는 반드시 string 타입이어야 하고, 필수입니다. 
	fontSize: PropTypes.number.isRequired, // fontSize는 반드시 number 타입이어야 하고, 필수입니다. 
    };

PropTypes 작동 방식

*정상적인 경우 : 올바른 타입의 전달시 문제 없습니다.

<Btn text="Save Changes" fontSize={18} />

*잘못된 경우 : 잘못된 타입의 props를 전달하면 브라우저 콘솔에 경고 메시지가 표시됩니다.

<Btn text={42} fontSize="large" />

PropTypes 사용 흐름 요약

• PropTypes 추가: PropTypes를 통해 props의 예상 타입과 필수 여부를 정의.
• React 런타임에서 검증: 컴포넌트가 잘못된 타입의 props를 받을 경우 경고를 출력.
• 실행에는 영향 없음: 경고는 출력되지만, 코드 실행은 계속됩니다.

PropTypes 사용 장점과 단점

*장점

• • 개발 중 오류를 쉽게 찾을 수 있음.
  • 협업 시 props의 타입과 규칙을 명확히 알 수 있음.

*단점

• • 런타임에서만 작동하므로 컴파일 타임에 잡아주지 못함.
  • 타입스크립트를 사용하면 PropTypes를 대체 가능.

​

끝!