정적언어에서 Type을 체크하는 것처럼, React에서도 타입을 체크해볼 수 있다. 바로바로 prop-types를 이용하는 것!
이게 귀찮은 작업이긴 해도, 일단 써보면 좋은 이유?
- 코드 가독성 굿굿
- 디버깅 굿굿
설치
yarn이나 npm을 이용해 prop-types 패키지를 설치해준다.
사용
- import 하기!
여타 다른 패키지들과 동일하게 import해서 쓸 수 있다.import PropTypes from "prop-types"; - 타입 체크
const Poster = ({ id, imageUrl, title, rating, year, isMovie = false }) => (
// 중략
);
Poster.propTypes = {
id: PropTypes.number.isRequired,
imageUrl: PropTypes.string,
title: PropTypes.string.isRequired,
rating: PropTypes.number,
year: PropTypes.string,
isMovie: PropTypes.bool
};함수형 컴포넌트에서는 인자로 들어가는 값들을 그 함수 아래에서 타입 체크 해줄수 있다.
클래스형에서도 마찬가지로 props로 넘김받는 값들의 타입을 체크 해주면 된다.
어떤 타입들이 있을까?
optionalArray: PropTypes.array,
optionalBool: PropTypes.bool,
optionalFunc: PropTypes.func,
optionalNumber: PropTypes.number,
optionalObject: PropTypes.object,
optionalString: PropTypes.string,
optionalSymbol: PropTypes.symbol,
optionalNode: PropTypes.node,
optionalElement: PropTypes.element,
optionalMessage: PropTypes.instanceOf(Message),
optionalEnum: PropTypes.oneOf(['News', 'Photos']),
optionalUnion: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
PropTypes.instanceOf(Message)
]),
optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
optionalObjectOf: PropTypes.objectOf(PropTypes.number),
optionalObjectWithShape: PropTypes.shape({
color: PropTypes.string,
fontSize: PropTypes.number
}),
requiredFunc: PropTypes.func.isRequired,
requiredAny: PropTypes.any.isRequired,자바스크립트의 원시타입 뿐만 아니라 다양하게 타입을 체크해볼 수 있는데
shape이나 oneOfType 같은것도 설정해볼 수 있고…
Custom으로 타입을 체크해볼 수 있다.
customProp: function(props, propName, componentName) {
if (!/matchme/.test(props[propName])) {
return new Error(
'Invalid prop `' + propName + '` supplied to' +
' `' + componentName + '`. Validation failed.'
);
}
},
customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
if (!/matchme/.test(propValue[key])) {
return new Error(
'Invalid prop `' + propFullName + '` supplied to' +
' `' + componentName + '`. Validation failed.'
);
}
})요런 식으로..!
공식문서에 있는걸 긁어온거고.. 아직까지 써본적은 없다.ㅋㅋㅋ
isRequired
필수로 있어야 하는 값에는 가장 끝에 isRequired를 붙여준다.
isRequired라고 써준 값이 비어있다면 에러 발생!
예시
노마드 강의를 보다 보면 prop-types를 필수적으로 쓰는 것 같다.
코드를 쓰는 좋은 습관쓰~? 😎
많고 많은 컴포넌트 중에 골라온 Section Component
import React from "react";
import PropTypes from "prop-types";
import styled from "styled-components";
const Container = styled.div`
margin-bottom: 50px;
:not(:last-chile) {
margin-bottom: 50px;
}
`;
const Title = styled.span`
font-size: 16px;
font-weight: 600;
margin-bottom: 25px;
`;
const Grid = styled.div`
display: grid;
margin-top: 25px;
grid-template-columns: repeat(auto-fill, 125px);
grid-gap: 25px;
`;
const Section = ({ title, children }) => (
<Container>
<Title>{title}</Title>
<Grid>{children}</Grid>
</Container>
);
Section.propTypes = {
title: PropTypes.string.isRequired,
children: PropTypes.oneOfType([PropTypes.node])
};
export default Section;React 공식문서 보면서 PropTypes에 node를 써주는것 보고 넘 신기했는데..
이미 니꼬가 강의에서 썼었네??
근데 난 기억이 안나네?? 강의 다시 들어야겠네?? 😂😂
급히 끝내보기.. 출처는 리액트 공식문서다.