Map을 사용하여 배열에 데이터 표시
배열에 저장된 데이터 컬렉션을 처리해야 할 때가 잦을 것입니다. 배열 데이터 처리는 다른 개체 처리와 비슷하지만, 데이터를 반복하여 살펴보고 사용자에게 표시하는 기능이 필요합니다. 믿기 어려울 수도 있겠지만, 이 작업은 JSX에서 JavaScript 코드를 사용하여 수행합니다. 특히 map 함수를 사용해야 합니다.
map을 이용하면 배열의 수정 복사본을 만들 수 있습니다. 이 기능은 배열의 값을 표시하기 위해 변환해야 하는 경우에 유용합니다. 사용자에게 값을 표시하려면 값을 가져와 HTML 요소 내에 포함해야 합니다. map은 이 작업에 안성맞춤인 함수입니다. map을 사용하면 배열의 개별 값이 포함된 HTML로 구성된 새 배열을 만들어 화면에 표시할 수 있습니다.
map 사용
map은 for...of 루프나 forEach 메서드와 비슷한 방식으로 작동합니다. 배열의 각 항목에 대해 한 번씩 실행됩니다. 가장 중요한 차이점은 map에 전달된 함수가 반환하는 값을 이용해 새 배열을 만든다는 점입니다.
제곱수가 있는 기존 배열을 이용해 새 배열을 만드는 방법을 확인하여 map 함수를 살펴보겠습니다. 먼저 숫자로 구성된 배열을 만듭니다.
const numbers = [2, 5, 8];
그런 다음 map을 사용합니다. map은 단일 매개 변수가 있는 함수를 허용합니다. 매개 변수는 원래 배열의 각 숫자 값으로 설정됩니다. => 또는 두꺼운 화살표 구문을 사용하여 이 목적을 위한 익명 함수를 만들게 됩니다.
const squared = numbers.map((number) => {
return number * number;
});
squared는 원래 제곱수를 포함하는 새 배열입니다. console.log를 이용해 원래 제곱수를 표시했다면 다음과 같은 화면이 표시될 것입니다.
console.log(squared);
// Output: [4, 25, 64]
인덱스에 액세스하여 키 생성
React에 목록을 표시할 때는 각 항목의 키를 설정하게 됩니다. 이렇게 하면 React와 사용자 모두가 현재 표시 중인 개별 항목을 참조하고 바인딩된 데이터에 다시 연결할 수 있습니다. 키를 생성하는 가장 일반적인 방법은 배열 내 항목의 인덱스를 사용하는 것입니다.
for 루프를 사용하면 기본적으로 인덱스를 구문의 일부로 생성하게 됩니다. map을 사용하면 대리자 함수의 두 번째 매개 변수를 사용하여 인덱스에 액세스할 수 있습니다. 두 번째 매개 변수는 자동으로 현재 인덱스로 설정됩니다.
const squared = numbers.map((number, index) => {
console.log(`Processing item ${index + 1}`);
return number * number;
});
React를 이용하는 map
이전 예제에서 강조 표시한 것처럼, 일반적으로 항목 목록을 표시할 때는 map을 사용합니다. 가장 큰 차이점은 예제에서처럼 숫자를 반환하는 대신 JSX를 반환한다는 것입니다. React에는 표시되는 모든 항목에 키가 있어야 한다는 지침이 있습니다. 표시 항목에 자연 키가 없다면 일반적으로 인덱스를 사용합니다. 예를 들어 제곱수를 div 요소에 표시하려면 다음을 사용하면 됩니다.
const squared = numbers.map((number, index) => {
return (
<div key={index}>{ number * number }</div>
);
});
같은 방법으로 squared를 JSX의 다른 변수로 사용할 수도 있습니다. { squared }를 JSX의 다른 위치에 추가했다면, 업데이트된 숫자를 이용해 div 요소를 렌더링할 것입니다.