<React> props of Component
Component의 특징인 props 대해 알아보겠습니다. Component가 JSX를 return하는 함수로 정의했었는데요. 함수로 정의되는 만큼 property를 전달할 수 있습니다. property들을 props라고 부릅니다. props는 Component의 재사용률을 높이는 매우 중요한 요소입니다. property 전달 방법 그리고 전달 받은 property는 어떻게 사용하는지 알아보겠습니다.
사용법
<Component <proprty명> = <property값>>
으로 전달할 수 있는데요. 전달한 property들은 Object형태로 props에 담겨 Component에 전달됩니다.
- 사용 가능한 property 값
- String
ex)string = "String"
- Array
ex)array = {[1, 2, 3, 4]}
- boolean
ex)boolean = {true}
- String
- 실제 전달 형태
실제 전달 형태는 아래와 같이 Object 입니다.
Object{
String: "String",
Array: [1, 2, 3, 4],
boolean: true
}
app.jsx
사용법을 토대로 실습을 해보겠습니다. 참고로 jsx에서 변수를 사용할때는 {}을 이용합니다. 아래와 같은 코드의 결과로 화면에서 hello minseok을 확인할 수 있게 됩니다.
/* deconstructor가 직관적이지 않다면 이것 처럼 해도 됩니다.
function Component(props){
return <h3>hello {props.name}</h3>;
}
*/
function Component({name}){
return <h3>hello {name}</h3>
}
function App(){
return (
<div>
<Component name = "minseok">
</div>
)
}
export default App;
Author And Source
이 문제에 관하여(<React> props of Component), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@since-1994/React-props-of-Component저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)