[React] 리액트 map()을 이용한 컴포넌트 반복하기

What

리액트에서 Props를 통해 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 수 있다는 것은 알고 있다.

이번에는 Props가 배열안의 객체 형태이고, map()을 통해 반복 수행하며 데이터를 조회할 수 있는 방법에 대해서 알아볼 것이다. 

 

How

/* 최상위 컴포넌트 App */

import List from './List'

const App = () => {

    const nameList = [
        {
            id: 1,
            name: 'Kim',
            food: '김치찌개'
        }, {
            id: 2,
            name: 'Lee',
            food: '된장찌개'
        }, {
            id: 3,
            name: 'Park',
            food: '순두부찌개'
        }
    ]
	
    return (
    	<div>
            <List nameList={nameList} />
        </div>
    )
}

첫 번째로 최상위 부모 컴포넌트인 App.js에 전달할 데이터 nameList 배열을 만들었다.

이 nameList를 자식 컴포넌트인 List 컴포넌트로 nameList={nameList}하여 props 전달하였다.

 

/* 부모 컴포넌트 List */

import Item from './Item'

const List = ({ nameList }) => {
    return (
    	<div>
            {nameList.map((it) => (
                <Item key={it.id} {...it} />
            ))}
        </div>
    )
}

export default List;

객체로 된 배열의 nameList라는 props를 받아온 List 컴포넌트는 바로 이 데이터를 사용하는 게 아니라

다시 Item이라는 자식 컴포넌트에게로 보내준다. 이 때, 두가지 꼭 기억해야할 점이 있다.

1) props를 전달할 때 key 값을 넣어줘야 한다. key는 다른 항목들 사이에서 식별할 수 있는 고유한 값이어야 한다.

2) 객체 전체를 보내주는 것이기 때문에 전개 연산자를 이용한다. 만약, 객체 안의 항목 중 일부만 보내기를 원한다면, {it.name} 이런 식으로 따로 쓰면 된다.

 

/* 자식 컴포넌트 Item */

const Item = ({id, name, food}) => {
    return (
        <div>
            <h4>{id}<h4>
            <h4>{name}<h4>
            <h4>{food}<h4>
        </div>
    )
}

export default Item;

map()으로 props를 전달받은 Item 컴포넌트에서는 이제 전달받은 데이터들을 활용할 수 있다.

props에는 전달받은 객체의 key값들과 동일한 이름을 적어준다. 결과값은 return 값이 전달받은 배열의 객체 수만큼 반복되어 출력된다.

 

1. 배열을 props로 전달할 때는 map()을 이용하기
2. map()을 이용할 때는 반드시 고유한 식별자 key 값을 넣어주기
3. 객체의 일부 항목이 아닌 통째로 전달할 때는 전개 연산자 이용하기