리액트 배열 랜더링 key

리엑트에서 배열을 랜더링할 땐 key를 써야한다

function ReviewList({ items, onDelete }) {
    return (
    <ul>
        {items.map((item) => {
        return(
            <li>
                <ReviewListItem item={item} onDelete={onDelete} />
            </li>)
        })}
    </ul>
    );
}

export default ReviewList;

리뷰 리스트를 보여주는 코드를 예시로 들어보자

위 경고 표시는 리스트의 각 child는 고유한 key prop를 가져야 한다고 한다
child라는건 위 코드에서 map메소드에서 랜더링 한것을 말한다
key라는 prop를 사용하지 않으면 위와 같은 경고 메시지가 표시된다

이 경고를 없애려면 최상위 태그에 key prop를 지정해 주면 된다

function ReviewList({ items, onDelete }) {
    return (
    <ul>
        {items.map((item) => {
        return(
            <li key={item.id}>
                <ReviewListItem item={item} onDelete={onDelete} />
            </li>)
        })}
    </ul>
    );
}

export default ReviewList;

경고표시가 사라진것을 알 수 있다

key를 지정할 때는 item의 id처럼 각 데이터를 구불할 수 있는 고유한 값으로 해야한다
index는 사용해서는 안된다

key prop를 사용하지 않는다면

• 요소들의 순서가 바뀌게 된다면 엉뚱한 위치에 랜더링될 수 있다

참고
코드잇