07. Map , Key

y__baam·2021년 9월 21일
0

Codecamp

목록 보기
7/13

Map

  • Map은 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.

Map 실습내용 입니다.

export default function MapFruitsPage() {

    const fruits = [
        { number: 1, title: "레드향" },//<div>1 레드향 </div>
        { number: 2, title: "샤인머스켓" }, // <div>2 샤인머스캣</div>
        { number: 3, title: "산청딸기" },
        { number: 4, title: "한라봉" },
        { number: 5, title: "사과" },
        { number: 6, title: "애플망고" },
        { number: 7, title: "딸기" },
        { number: 8, title: "천혜향" },
        { number: 9, title: "과일선물세트" },
        { number: 10, title: "귤" },
    ]

    return (
        <div>

            {fruits.map((el) => (
                <div>
                    <span>{el.number}</span>,
                    <h1>{el.title}</h1>
                </div>
            ))}
        </div>
    )
}

Key

key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다.

key를 선택하는 가장 좋은 방법은 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별할 수 있는 문자열을 사용하는 것입니다. 대부분의 경우 데이터의 ID를 key로 사용합니다.

렌더링 한 항목에 대한 안정적인 ID가 없다면 최후의 수단으로 항목의 index를 key로 사용할 수 있습니다.

항목의 순서가 바뀔 수 있는 경우 key에 인덱스를 사용하는 것은 권장하지 않습니다. 이로 인해 성능이 저하되거나 컴포넌트의 state와 관련된 문제가 발생할 수 있습니다.

Index를 Key로 줘도 괜찮은 상황

index를 key로 줘도 괜찮은 상황이 있습니다. 아래 3가지 조건을 만족하면 됩니다.

  1. 정적인 데이터. 계산되지 않고 변경되지 않는 데이터
  2. map에 있는 모든 데이터에 id가 없을 경우
  3. 데이터가 재정렬되거나 필터링 되지 않는 경우. (계속 그 자리 그대로)
profile
ㅋㅋ루삥뽕

0개의 댓글