(React) Props

component 간에 데이터를 전달할 때 사용

 

데이터를 받는 방법

1. 받는 함수의 파라미터에 { 변수명1, 변수명2, ... } 을 명시

// 호출측 <Message greet="Welcome" who="John" /> // 받는측 function Message( { greet, who } ) {   return <div>{greet}, {who}!</div>; }

 

2. 받는 함수의 파라미터로 props 를 선언

// 호출측 <Hello who="John"> // 받는측 function Hello(props) {   return <div>Hello, {props.who}!</div>; }

 

3. 받는측이 클래스의 경우

// 호출측 // Render <HelloAsClass who="John" /> // 받는측 import { Component } from 'react'; class HelloAsClass extends Component {   render() {     return <div>Hello, {this.props.who}!</div>;   } }

 

4. Props  value의 타입

• string : prop="My String Value"
• 변수 혹은 변수의 조합: prop={`My String Value ${myVariable}`}
• 숫자 (int, double, float...) : prop={55}
• boolean : prop={true}
• dictionary : prop={{ property: 'Value' }} 
• Array : prop={['Item 1', 'Item 2']}
• JSX : prop={<Message who="Joker" />}

5. children
    <component> 여기 부분을 children 으로 전달 </component> 

// 호출측 <Parent>   <span>I'm a child!</span> </Parent> function Parent({ children }) {   console.log(children); // logs <span>I'm a child!</span>   return <div>{children}</div>; }