📌 .map() 함수
- 모든 배열(array) 자료 뒤에는 .map() 함수를 사용할 수 있다
- .map(function () {}) map 뒤에는 괄호안에 callback 함수를 사용할 수 있다
✏️ 기능
1) array 자료 갯수만큼 함수안의 코드를 실행시켜 준다. 아래와 같이 console.log(1)을 적으면 1를 세 번 실행시켜 준다
[1,2,3].map(function() {
console.log(1)
})2) 함수의 파라미터는 array 안에 있던 자료이다. 아래 함수는 'a'를 파라미터로 받았고 그렇기 때문에 [배열안에 들어가 있는 1,2,3]이 돌아가면서 (a) 안으로 들어가 console창에 출력된다
[1,2,3].map(function(a) {
console.log(a)
})3) return 안에 무언가를 적으면 array로 담아준다. 아래 코드는 콘솔에 찍으면 return 되는 값인 '1233211'이 배열의 갯수인 3번만큼 반복되서 출력된다
[1,2,3].map(function(a) {
return '1233211'
})📌 map 함수 적용시 key props를 부여하는 이유
💡 배열을 반복할 때 주의점
배열에 있는 요소의 인덱스를 사용하는 것이 아래 오류를 억제하는 방법이라는 것은 일반적인 오해
Each child in an array should have a unique "key" prop.React는 key prop을 사용하여 component-to-DOM Element 관계를 이해한 다음 조정 프로세스에 사용한다. 따라서 키가 항상 고유한(unique) 상태를 유지하는 것이 매우 중요! 그렇지 않으면 React가 요소를 혼합하고 잘못된 요소를 변경할 가능성이 높다 그리고 최상의 성능을 유지하려면 이러한 key가 모든 재렌더링 동안 정적 상태를 유지하는 것이 중요하다.
Array가 확실히 정적이라는 것을 알면 위의 사항을 항상 적용할 필요는 없지만 가능하면 모범 사례를 적용하는 것을 추천
React 개발자는 아래와 같이 언급했다
- key는 성능에 관한 것이 아니라 정체성에 관한 것입니다(결과적으로 더 나은 성능으로 이어짐). 임의로 할당되고 변경되는 값은 identity가 아니다.
- 데이터가 어떻게 모델링되는지 알지 못하면 현실적으로 key를 [자동으로] 제공할 수 없다. ID가 없으면 일종의 hashing 기능을 사용하는 것이 좋다.
- 배열을 사용할 때 이미 내부 keys가 있지만 배열의 인덱스이다. 새 element를 삽입하면 해당 키가 잘못된다.
요약하면, key는
- 유니크해야한다: key는 형제 component와 동일할 수 없다
- 정적이어야 한다: 렌더 간에 key가 변경되어서는 안 된다
아래 예시는 사람들이 많이 하는 실수라고 한다. 잘못 된 방법은 아니어서 정적인 배열을 다룰 때(예를 들어, HOME, SHOP, CONTACT US와 같은 Nav 메뉴)는 합당한 어프로치이지만 어떤 아이템들을 더하고 빼거나 재배치할 때 주의해야 한다.
// BAD EXAMPLE(potentially)
<tbody>
{rows.map((row, i) => {
return <ObjectRow key={i} />;
})}
</tbody>아래 예시는 필요 없을 때에도 항상 리스트 아이템을 재 렌더링하게 리액트를 force 시킨다.퍼포먼스에 상당한 영향을 주기 때문에 bad example이다.
// BAD EXAMPLE
<tbody>
{rows.map((row) => {
return <ObjectRow key={Math.random()} />;
})}
</tbody>아래 예시는 dataset의 각 항목의 고유한 property를 사용하기 때문에 가장 best exaple이라고 할 수 있다. 예를 들어 rows가 데이터베이스에서 가져온 데이터가 포함된 경우 Primary Key(일반적으로 자동 증가 숫자)를 사용할 수 있다.
key를 선택하는 가장 좋은 방법은 형제 중에서 목록 항목을 고유하게 식별하는 문자열을 사용하는 것. 대부분 데이터의 ID를 key로 사용한다.
// GOOD EXAMPLE
<tbody>
{rows.map((row) => {
return <ObjectRow key={row.uniqueId} />;
})}
</tbody>참고 자료:
코딩애플 유료강의: React 리액트 기초부터 쇼핑몰 프로젝트까지!
4대륙 개발자