• 목차

개요

• 이제 meetup 목록을 AllMeetups 컴포넌트에 출력해보자.

AllMeetups.js

const DUMMY_DATA = [
    {
        id: 'm1',
        title: 'This is a first meetup',
        image:
            '<https://upload.wikimedia.org/wikipedia/commons.jpg>',
        description:
            'This is a first',
    },
    {
        id: 'm2',
        title: 'This is a second meetup',
        image:
            '<https://upload.wikimedia.org/wikipedia/commons.jpg>',
        address: 'Meetupstreet 5, 12345 Meetup City',
        description:
            'This is a first',
    },
];

function AllMeetupsPage() {
    return (
        <section>
            <h1>All Meetups</h1>
            {DUMMY_DATA.map((meetup) => {
                return (
                    <li key={meetup.id}>{meetup.title}</li>
                );
            })}
        </section>
    );
}

export default AllMeetupsPage;

• 출력하는 데이터는 임의의 더미 데이터를 받아 출력하였다.
• map() 을 통해서 더미 데이터 리스트에 접근하여 값들을 가져왔다.
• 리액트에서 리스트를 효과적으로 업데이트하고 렌더링하기 위해서는 주의 사항이 있다.
  • 각 리스트의 자식 노드들은 고유한 key prop 을 가져야 한다.
  • 그러므로 key 으로 각 리스트 아이템의 유일한 값 meetup.id 를 추가하였다.