[React] props

✅ props

• 부모 컴포넌트에서 자식 컴포넌트로 데이터 넘겨주기

• 기본적인 일반 문자와 더불어 state까지 다양한 자료 넘겨주기 가능

• 단, 부모에서 자식 방향으로만 가능!! 자식에서 부모로, 자식에서 자식간 전달은 불가능!!

• 부모 컴포넌트 내에서 자식 컴포넌트를 호출 할 때 태그 내부 공간에서 데이터 전달

• 전달받은 데이터는 props.데이터이름 으로 사용

• 부모 컴포넌트에서 자식 컴포넌트를 호출하며 children 넘겨주면 props.children으로 사용

function App(){
<div>
	<Info name = {'Yu'} age = 27>Hello~~</Info>
</div>
}

function Info(props){
	<h4>{props.children}</h4>
	<h4>my name is {props.name}</h4>
	<h4>I'm {props.age} years old</h4>
}

🔸 defaultProps

• props값을 따로 지정하지 않았을 때 보여줄 기본값

function Info(props){
	<h4>my name is {props.name}</h4>
	<h4>I'm {props.age} years old</h4>
}

...

Info.defaultProps = {
	name : '기본 이름'
}

🔸 propTypes로 props 검증하기

• propTypes import해서 사용
• propTypes 지정 뒷부분에 .isRequired를 붙여 필수 입력을 요구할 수 있음

import PropTypes from 'prop-types'

...

function Info(props){
	<h4>my name is {props.name}</h4>
	<h4>I'm {props.age} years old</h4>
}

...

Info.propTypes = {
	name : PropTypes.string
    age : PropTypes.number.isRequired
}

✅ TypeScript형식으로 props 넘겨주기

• props는 오브젝트 형식으로 넘겨주기 때문에 이에 맞춰서 TypeScript타입 지정

function App(){
<div>
	<Info name = {'Yu'} age = 27></Info>
</div>
}

function Info(props : {name : string, age : number}){
	<h4>my name is {props.name}</h4>
	<h4>I'm {props.age} years old</h4>
}

🌟 잘못된 부분에 대한 말씀은 언제나 저에게 큰 도움이 됩니다. 🌟
👍 감사합니다!! 👍