[react] Components with JSX + Props + 동적데이터

• 다중 Components 의  props 사용법

import React from "react"

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


/* 이런 방식도 가능 
function Food(props) {
return <h1>I love {props.fav}</h1>;
}
*/

function App() {
    return (
        <div>
            <h1> Hello FFF!! </h1>
            <Food fav="kimchi" 
            	something={true}
                papapapa={["hello",1,2,3,4]}/> /*이런식이면 props 사용*/
            <Food fav="ramen" />
            <Food fav="samgiopsal" />
            <Food fav="chukumi" />
        </div>
    );
}


export default App;

 

• 위에 예제처럼 Food component를 복붙 하지 않기 위해선 함수 생성 후 동적 데이터 생성

import React from "react"

function Food({ name, picture }) {
    return (
        <div>
            <h1>I love {name}</h1>
            <img src={picture} />
        </div>

    );
}

//함수 추가 생성
const foodLike = [
    {
        name: "kimchi",
        image: "https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAxNzAzMjFfMTY1%2FMDAxNDkwMDgzNTAxOTAy.RiKsHEGpvqVbqgygh-9kUAQwra4HJL_nbl7vf4AqHjUg.ne42Ah_0CB4RO9aIi3QpPg_FlOkRWQZSAJZNm4kjzW8g.JPEG.mia5472%2F12627997_1675919799335878_1482056349_n.jpg&type=sc960_832"
    },
    {
        name: "Samgyeopsal",
        image: ""
    },
    {
        name: "bulgogi",
        image: ""
    }
]

function App() {
    return (
        <div>
            <h1> Hello FFF!! </h1>
            {foodLike.map(dish => ( //map을 이용하여 동적 데이터 생성
                <Food name={dish.name} picture={dish.image} />
            ))}
        </div>
    );
}


export default App;