#5 리스트 아웃풋 시키기

같은 컴포넌트를 반복해야 할 경우, map()을 통해 간단히 구현할 수 있다.

리액트까지 왔는데, 자바스크립트를 설명할 필요는 없을 것 같고, 주의해야 할 점은 ()=>{}이 아닌 ()=>() !

return 내에서 중괄호({ })는 스크립트가 들어간다는 의미이기 때문에 일반 가로를 사용한다.

 

그리고 key라는 props를 아이템에 전달해줘야 한다. 없을 경우 에러까지는 아니지만 경고문이 콘솔을 더럽힌다.

html의 id와 비슷한 개념인데 전체 아이템에서 고유한 값일 필요는 없고, 형제 사이에서 고유 값을 지녀야 한다. id 데이터가 있으면 동일하게 넣어주면 되고, 없을 시 index를 활용해 생성해 주면 된다.

import classNames from "classnames";

const List = () => {
    const items = [
        {title: 'A', price: '3000'},
        {title: 'B', price: '5000'}
    ];

    return (
        <div className={classNames("products")}>
            {items.map((item, idx)=>(
                <a href="#" key={idx}>
                    title: {item.title}
                    price: {item.price}원
                </a>
            ))}
        </div>
    )
}

export default List;