map(), 프로젝트

Array.prototype.map()

• 배열 내 모든 요소에 대해서 함수를 호출하고 그 결과를 모아 새로운 배열을 만드는 함수
• 리액트에서는 배열 내 데이터를 가공해서 jsx 엘리먼트 만드는 데에 사용할 수 있음

ex)

export default function App(){
    const cards = data.map(item =>{
        return (
            <Card
                key = {item.id} 
                {...item}
            />
            )
    })
    
    return (
    <div>
        <Navbar />
        <section>
            {cards}
        </section>
    </div>
    )
}

배운 것을 가지고 페이지 하나를 만들어 보았다.
myTravelJournal