• 목차

개요

• 더 다양하고 화려한 리스트들을 출력을 위해 다양한 컴포넌트와 스타일들을 추가해보자.
• src/components/meetups : meetup 과 관련된 컴포넌트 저장

MeetupItem.js

import classes from './MeetupItem.module.css'

function MeetupItem(props) {
    return(
      <li className={classes.item}>
          <div className={classes.image}>
              <img src={props.image} alt={props.title}/>
          </div>
          <div className={classes.content}>
              <h3>{props.title}</h3>
              <address>{props.address}</address>
              <p>{props.description}</p>
          </div>
          <div className={classes.actions}>
              <button>To Favorites</button>
          </div>
      </li>
    );
}

export default MeetupItem;

• Item 정보(image, title, address) 를 props 로 받아서 아이템을 만들어주는 컴포넌트이다.

MeetupList.js

import classes from './MeetupList.module.css'
import MeetupItem from "./MeetupItem";

function MeetupList(props) {
    return (
        <ul className={classes.list}>
            {props.meetups.map(meetup =>
                <MeetupItem
                    key={meetup.id}
                    id={meetup.id}
                    image={meetup.image}
                    title={meetup.title}
										address={meetup.address}
                    description={meetup.description}
                />
            )}
        </ul>
    );
}

export default MeetupList;

• Item List 를 props 로 받아서 리스트를 만들어주는 컴포넌트이다.
• 이런 식으로 데이터를 받아 표현하는 방식을 사용한다면 데이터가 다르더라도 컴포넌트를 재사용 할 수 있다. 독립적이고 재사용이 가능한 컴포넌트를 만들자.
• key prop 은 사용자 설정 element 에서도 추가 코드 없이 사용할 수 있다. 고유한 값을 설정하자.
• 해당 예제에서는 개별 prop 를 받았지만, 컴포넌트를 통제로 받아서 사용하는 방법도 있다.

AllMeetups.js

const DUMMY_DATA = [
    {
        id: 'm1',
        title: 'This is a second meetup',
        image:
            '<https://upload.wikimedia.org/wikipedia/commons.jpg>',
        address: 'Meetupstreet 1, 54321 Meetup City',
        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>
            <MeetupList meetups={DUMMY_DATA} />
        </section>
    );
}

export default AllMeetupsPage;

• MeetupList 컴포넌트에 더미 데이터 리스트를 넘겨주었다.

npm start

• All Meetups 에서 List 가 출력 된 것을 볼 수 있다.