import React from 'react';

function Food(props){
    return <h1>I like {props.fav}</h1>
}

function App(){
    return (
        <div>
            <h1>Hello</h1>
            <Food fav="kimchi" />
            <Food fav="ramen" />
            <Food fav="rice" />
            <Food fav="chukumi" />
        </div>
    );
}

export default App;

Food컴포넌트에 kimchi, ramen, ... 이라는 value로 prop의 fav를 줬다.

Props 사용하기

props의 값으로는 다양한 타입이 올 수 있다.

<Food 
    fav="kimchi" 
    something={true} 
    ingredient={["고춧가루", "설탕", 3, 4, true]} 
/>

누군가가 Food컴포넌트로 정보를 보내려하면 리액트는 이 모든 속성을 가져온다.
그리고 function Food(){}컴포넌트의 인자로 그것들을 넣는다.

Props 선택적 사용

import React from 'react';

function Food({fav}){
    return <h1>I like {fav}</h1>
}

function App(){
    return (
        <div>
            <h1>Hello</h1>
            <Food fav="kimchi" />
            <Food fav="ramen" />
            <Food fav="rice" />
            <Food fav="chukumi" />
        </div>
    );
}

export default App;