리액트 - 컴포넌트 반복

자바스크립트 배열 객체의 내장 함수인 map 함수를 사용하여 반복되는 컴포넌트를 렌더링할 수 있습니다. map 함수는 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과를 새로운 배열을 생성합니다.

 

문법

이 함수의 파라미터는 다음과 같습니다.

 

callback : 새로운 배열의 요소를 생성하는 함수로 파라미터는 다음 세 가지입니다.

1. currentValue : 현재 처리하고 있는 요소

2. index : 현재 처리하고 있는 요소의 index 값

3. array : 현재 처리하고 있는 원본 배열

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

 

 

예제

 

 

 

ES6 문법으로 적용

 

 

 

 

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

---

 

const IterationSample = () => {
    const names = ['눈사람', '얼음', '눈', '바람'];
    const nameList = names.map(name => <li>{name}</li>);

    return <ul>{nameList}</ul>;
};

 

 

 

정상적으로 잘 랜더링되는걸 확인할 수 있습니다.

 

 

하지만 각각의 Child 가 유니크한 Key prop을 가져야한다는 에러가 발생합니다.  

 

 

Key

---

리액트에서 Key는 컴포넌트 배열을 렌더링했을 때 어떤 원소에 변동이 있었는지 알아내려고 사용합니다. 예를 들어 유동적인 데이터를 다룰 때는 원소를 새로 생성할 수도, 제거할 수도, 수정할 수도 있습니다. Key가 없을 때는 Virtual DOM을 비교하는 과정에서 리스트를 순차적으로 비교하면서 변화를 감지합니다. 하지만 key가 있다면 이 값을 사용하여 어떤 변화가 일어났는지 더욱 빠르게 알아낼 수 있습니다.

 

 

key는 유니크해야됩니다.  map 함슈에 전달되는 콜백 함수의 인수 index 값을 사용해서 key를 설정하도록 하겠습니다.

const IterationSample = () => {
    const names = ['눈사람', '얼음', '눈', '바람'];
    const nameList = names.map((name, index) => <li key={index}>{name}</li>);
    return <ul>{nameList}</ul>;
};

 

고유한 값이 없을 때만 index 값을 key로 사용해야 합니다. index를 key로 사용하면 배열이 변경될 때 효율적으로 리렌더링 하지 못합니다.