props
properties의 약어로, 컴포넌트의 속성을 설정할 때 사용하는 요소이다.
props 값은 해당 컴포넌트를 사용하는 부모 컴포넌트에서 설정할 수 있다.
props는 읽기 전용이기 때문에 수정해서는 안된다.
<body>
<div id="root"></div>
<script type="text/babel">
function Title(props) {
return <h1> 안녕하세요 { props.name }님, 환영합니다.</h1>;
}
/* props.name이 존재하지 않을 경우의 기본 값 설정 */
Title.defaultProps = {
name : '아무개'
}
const name1 = "홍길동";
const name2 = "유관순";
ReactDOM.createRoot(document.getElementById('root')).render(
[
<Title name={ name1 }/>,
<Title name={ name2 }/>,
<Title name=" 이순신 "/>,
<Title/>
]
);
</script>
children-props
<body>
<div id="root"></div>
<script type="text/babel">
function ChilerenNodePrinter(props) {
console.log(props);
return(
<>
<h1>자식 노드가 가지고 있는 값은?</h1>
<h3>children : <font style={ {color : 'orange'} }>{ props.children }</font></h3>
</>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(
[
<ChilerenNodePrinter name="홍길동" phone="010-1234-5678">텍스트노드</ChilerenNodePrinter>,
<ChilerenNodePrinter><div>자식노드</div></ChilerenNodePrinter>,
<ChilerenNodePrinter><div>1</div><div>2</div><div>3</div></ChilerenNodePrinter>
]
);
</script>
</body>
구조분해할당
S6에서 제공하는 구조분해할당 문법을 이용하여 props 객체 내부의 값을 바로 추출해서 사용할 수 있다.
(props. 를 생략하고 사용 가능하다)
1. 전달 받은 props 인자를 구조분해할당 하는 방법
function PropsPrinter(props) {
const { name, children } = props;
return (
<>
<h1>제 이름은 { name }입니다. </h1>
<h3>제가 가지고 있는 children은 { children }입니다. </h3>
</>
)
}
ReactDOM.createRoot(document.getElementById('root')).render(
<PropsPrinter name ="홍길동">텍스트노드</PropsPrinter>
);
2. 전달 받은 인자를 구조분해할당 하는 방법
function PropsPrinter({ name, children}) {
return (
<>
<h1>제 이름은 {name}입니다. </h1>
<h3>제가 가지고 있는 children은 {children}입니다. </h3>
</>
)
}
ReactDOM.createRoot(document.getElementById('root')).render(
<PropsPrinter name ="홍길동">텍스트노드</PropsPrinter>
);
props-type-verify
props의 타입이 잘못 되었다거나 필수 타입이 처리되지 않았음을 콘솔을 통해 알려준다. (랜더링이 되기는 함)
필수적인 설정은 아니나 큰 규모의 프로젝트를 진행하거나 협업하게 되면 해당 컴포넌트에 어떤 props가 필요한지
쉽게 알 수 있어 개발 능률이 좋아질 수 있다.
<body>
<div id="root"></div>
<script type="text/babel">
function PropsVerify({ name, favoriteNumber, children }) {
return (
<>
<h1>제 이름은 { name } 입니다.</h1>
<h2>제가 좋아하는 숫자는 { favoriteNumber } 입니다.</h2>
<h3>제가 가지고 있는 children은 { children } 입니다.</h3>
</>
);
}
PropsVerify.propTypes = {
name : PropTypes.string,
favoriteNumber : PropTypes.number.isRequired
};
ReactDOM.createRoot(document.getElementById('root')).render(
[
<PropsVerify name="홍길동" favoriteNumber={ 5 }>텍스트노드</PropsVerify>,
<PropsVerify name={ 3 }>텍스트노드</PropsVerify>
// name숫자 전달, number 전달 안 함
]
);
</script>
</body>
'LECTURE > React' 카테고리의 다른 글
| state (0) | 2023.04.18 |
|---|---|
| React rendering (0) | 2023.04.17 |
| [React] JSX intro, 표현법, Fragment, attribute, 주석 작성법 (0) | 2023.04.17 |
| [React] intro - createElement and render, history of component (0) | 2023.04.17 |