props
props(properties)는 컴포넌트 생성 시 외부에서 설정하는 속성을 말한다.
Copy class MainComponent extends React.Component {
render(){
return (
<>
<h1>Hello {this.props.name}! </h1>
<h1>Let's study react version {this.props.version}</h1>
</>
);
}
}
const app = ReactDOM.createRoot(document.querySelector("#app"));
app.render(
<MainComponent name="열혈강사" version="18"/>
); name과 version에 해당하는 데이터는 state props
데이터는 모두 문자열로 저장되며, 데이터 유형을 지정하고 싶다면 표현식을 사용해야 한다.
props 표현식 설정
문자열이 아닌 데이터를 property로 설정해야 하는 경우에는 다음과 같이 JSX에 표현식을 작성한다.
Copy app.render(
<MainComponent name={"열혈강사"} version={18}/>
); 실행 결과는 같지만 데이터의 형태를 다르게 인식한다.
props Type 검사
props 표현식 설정 시 원하는 자료형인지 검사할 수 있다. prop-types 의존성이 필요하다.
다음과 같이 추가 CDN을 작성한다. 개발 또는 배포 단계에 맞는 형태를 골라 작성한다.
Copy <!-- development version -->
<script src="https://unpkg.com/prop-types@15.6/prop-types.js"></script>
<!-- production version -->
<script src="https://unpkg.com/prop-types@15.6/prop-types.min.js"></script> 컴포넌트 내부에 다음과 같이 타입 검사 객체를 작성한다.
name은 문자열(PropTypes.string) 설정
version은 숫자(PropTypes.number) 설정
Copy static propTypes = {
name : PropTypes.string,
version : PropTypes.number
}; 동일한 컴포넌트에 검사 코드를 추가한 뒤 실행하면 PropType 검사가 이루어진다.
설정된 형태와 동일한 Property가 설정된 경우 메세지 출력 없이 화면 정상 출력
설정된 형태와 다른 Property가 설정된 경우 경고메세지가 출력 및 화면 정상 출력
설정과 동일할 경우
Copy app.render(
<MainComponent name={'열혈강사'} version={18}/>
); 설정과 동일하지 않을 경우
version 값을 문자열로 전달해본다.
Copy app.render(
<MainComponent name={'열혈강사'} version={'18'}/>
); 다음과 같은 오류 메세지가 발생한다.
Warning: Failed prop type: Invalid prop version of type string supplied to MainComponent , expected number
props 누락에 대한 처리
다음과 같이 props가 설정되지 않을 경우에 대한 처리도 필요하다.
Copy app.render(
<MainComponent/>
); 이 경우 props에 설정되는 항목이 없기 때문에 해당 자리에 아무 내용도 나오지 않는다.
만약 이 경우 문제가 될 수 있다면 다음 두 가지 방법이 있다.
해당 항목이 필수임을 PropTypes로 설정한다.
props에 없을 경우를 대비한 기본값을 설정한다.
이어지는 예시에서는 name 항목을 필수 항목으로 설정하고, version 항목에는 1이라는 기본값을 부여한다.
PropTypes 필수 설정
propTypes 설정 객체를 다음과 같이 변경시킨다.
Copy static propTypes = {
name : PropTypes.string.isRequired,//필수 항목 설
version : PropTypes.number
}; name이 설정되지 않으면 다음과 같은 오류 메세지가 콘솔창에 출력된다.
Warning: Failed prop type: The prop name is marked as required in MainComponent , but its value is undefined .
props 기본값 설정
name이 없을 경우 아무개, version이 없을 경우 1로 설정되도록 기본값을 구현한다. 기본값은 PropTypes 검사 객체와는 별개로 클래스 내부에 다음과 같이 작성한다.
Copy static defaultProps = {
name : "아무개",
version : 1
}; 최종 코드
최종적으로 완성된 코드는 다음과 같다.
Copy <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React CDN Example</title>
</head>
<body>
<div id="app"></div>
<!-- 개발용 CDN -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<!-- 배포용 CDN -->
<!-- <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script> -->
<!-- <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script> -->
<!-- react type 검사 CDN -->
<script src="https://unpkg.com/prop-types@15.7.2/prop-types.js"></script>
<!-- 바벨 CDN(using JSX) -->
<script src=" https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
class MainComponent extends React.Component {
static defaultProps = {
name : "아무개",
version : 1
};
static propTypes = {
name : PropTypes.string.isRequired,//필수 항목 설정
version : PropTypes.number
};
render(){
return (
<>
<h1>Hello {this.props.name}! </h1>
<h1>Let's study react version {this.props.version}</h1>
</>
);
}
}
const app = ReactDOM.createRoot(document.querySelector("#app"));
app.render(
<MainComponent/>
);
</script>
</body>
</html> 
