[React JS] 리액트를 다루는 기술 - 컴포넌트 반복

 

1. 자바스크립트 배열의 map() 함수

map() 함수는 자바스크립트 배열 객체의 내장 함수로, 반복되는 컴포넌트를 렌더링할 때 사용할 수 있다.

map() 함수는 파라미터로 전달된 함수를 사용해 배열 내 각 요소를 원하는 규칙에 따라 변환 후 그 결과로 새로운 배열을 생성한다.

 

< 문법 및 사용 방법 >

arr.map(callback, [thisArg]);

▶ callback: 새로운 배열의 요소를 생성하는 함수.

• currentValue: 현재 처리하고 있는 요소
• index: 현재 처리하고 있는 요소의 index 값
• array: 현재 처리하고 있는 원본 배열

▶ thisArg(선택항목): callback 함수 내부에서 사용할 this 레퍼런스

 

const nums = [1, 2, 3, 4, 5];

const processed = nums.map(num => num*num);

console.log(processed);

위의 코드는 map() 함수를 이용한 예시이다.

map() 함수를 사용하여 배열 [1, 2, 3, 4, 5]의 각 요소를 제곱해 새로운 배열을 생성해낸다.

 

 

 

2. 데이터 배열을 컴포넌트 배열로 변환하기

기존 배열을 이용해 새로운 배열을 생성한 것처럼, 기존 배열로 컴포넌트로 구성된 배열을 생성할 수 있다.

 

const IterationSample = () => {
  const names = ['snowman', 'ice', 'snow'];
  const nameList = names.map(name => <li>{name}</li>);
  return <ul>{nameList}</ul>;
};

export default IterationSample;

다음과 같이 문자열로 구성된 배열을 사용하여 <li> </li>로 생성된 배열을 새로 생성 후, nameList에 담아 해당 값을 return 해준다. App 컴포넌트에서는 IterationSample 컴포넌트를 불러와 렌더링하여 해당 배열이 웹 브라우저에 출력될 수 있다.

 

하지만 웹 브라우저에는 잘 출력되지만 key가 없다는 경고 메시지가 콘솔 창에 나올 것이다.

 

 

 

3. Key

key는 컴포넌트 배열을 렌더링할 때 어떤 원소에 변동이 있었는지 알아내기 위해 사용한다.

즉 유동적인 데이터를 다룰 때, key가 없으면 virtual DOM을 비교하는 과정에서 리스트를 순차적으로 비교하여 변화를 감지해야 하지만, key가 있으면 key 값을 사용해 어디서 어떤 변화가 발생했는지 빠르게 파악 가능하다.

 

< key 설정 >

map() 함수의 인자로 전달되는 함수 내부에서 컴포넌트 props를 설정하듯이 key 값을 설정할 수 있다.

key 값은 유일해야 하며, 데이터가 가진 고유값을 key 값으로 설정해야 한다.

 

앞선 예제의 컴포넌트에 key 값을 index 값으로 부여한 코드는 아래와 같다.

const IterationSample = () => {
  const names = ['snowman', 'ice', 'snow'];
  const nameList = names.map((name, index) => <li key - {index}>{name}</li>);
  return <ul>{nameList}</ul>;
};

export default IterationSample;

 

하지만 위 예시 코드와 같이 고정된 배열을 사용하여 index 값을 key 값으로 사용할 상황 보다는 동적인 배열을 렌더링 하는 상황이 더 많을 것이다. 이런 상황에서는 주로 고유 id를 부여해 key 값을 대신할 수 있다.

 

import {useState} from "react";

const IterationSample = () =>{
  const [names, setNames] = useState([
  	{id: 1, text: "snowman"},
    {id: 2, text: "ice"},
    {id: 3, text: "snow"}
  ]);
  
  const nameList = names.map(name => <li key = {name.id}>{name.text}</li>);
  return <ul>{nameList}</ul>
  ...
};