React Props(properties)

콩콩이·2023년 2월 1일
0

리액트를 배우며

목록 보기
1/1

props는 properties의 줄임말 -> 컴포넌트 속성을 설정할 때 사용하는 요소

import React from "react";
const MyCom = props => {
return <div>저의 번호는, {props.num}입니다.</div>;
};
MyCom.defaultProps = { 
 num: '3'				
};
export default myCom;
// 저의 번호는, 3입니다.

props는 값을 조회할 때 props.num이란 키워드를 붙여줘야하는데
ES6에서는 비구조화 할당 문법을 사용하여 좀더 편리하게 조회하는 방법이 있다.

const MyCom = props => {
	const { num, nick } = props;
    return (
    	<div>
        저의 번호는 { num }입니다 <br/>
        닉네임은 { nick } 입니다.
        </div>
       );
    };

함수형 컴포넌트에서는

const MyCom = ({ num, nick }) => {
return ();

이런식으로도 가능하다.


propTypes으로 props검증

MyCom.propTypes = {
	name: PropType.string,
	favoriteNumber: PropTypes.number.isRequired
}

이런식으로 string, number 고정된 타입을 줄수 있고,
isRequired를 사용하여 favNumber의 값이 정의되지않으면 오류메시지를 표시한다.

profile
미노

0개의 댓글