props는 간단하게 설명하면은 컴퍼넌트에 값을 전달할 때 사용하는 매개변수 같은 역할을 한다.
props는 비구조화 할당을 하는데 비구조화 할당 문법을 사용하면 객체 안에 있는 값을 추출해서 변수 혹은 상수로 바로 선언하면 할당할 수 있다.
props를 사용할때 props와 함께 사용하는 것으로는 defaultProps가 있다.
defaultProps는 컴포넌트에 props를 지정하지 않았을 때 기본적으로 사용할 값을 설정할때 사용한다. 쉽게 말해 기본값을 설정해준다.
import React from 'react'
function Hello({props}){
return <div style={{color: props.color }}>
Hello, {props.name}!</div>
}
Hi.defaultProps = {
color : 'white',
name : '이'
}
export default Hi;
코드를 설명하자면!
props로 name, color 값을 사용하고 싶다면 props.name, props.color 이렇게 사용을 하면 된다.
그리고 defaultProps를 놓음으로써 color는 화이트로 name은 '이'로 기본값을 설정해두었다.
props.children은 컴포넌트 태그 사이에 넣은 값을 조회하고 싶을 때 사용한다.
이는 특정 조건에 따라 다른 결과물을 랜더링 하는 조건부 랜더링을 한다.
<div style={{color}}>{ isSpecial ? <b>*</b> : null } Hello, {name}!</div>