컴포넌트 내부에 반복되는 DOM 요소가 있다면 일일히 작성하기 번거롭습니다. 또한 동적인 요소라면 절대 관리가 불가능합니다. 할 일 목록을 만들었다고 가정하면, 생성되었다 삭제되는 내용을 일일히 만들어줄수는 없으니까요.
map() 을 이용한 반복
자바스크립트 배열의 prototype 함수인 map() 을 이용하여 반복되는 요소를 만들어낼 수 있습니다.
import React from 'react';
const IterationSample = () => {
const names = ['눈사람', '얼음', '눈', '바람'];
const nameList = names.map(name,index => <li key={index}>{name}</li>);
return <ul>{nameList}</ul>;
};
export default IterationSample;
배열의 key
리액트 배열은 key 값을 가질 수 있습니다.
Key를 사용하는 이유
const arr = [a,b,c,d];위와 같은 배열이 있을 때
arr.map((v,i) => {<li key= 설정할 키 값 >{v}<li/>})그 배열을 li로 렌더링해주는 코드가 있다고 가정해봅시다.
a와 b사이에 p 를 삽입하게 된다면, 리렌더링 과정에서 a과 b사이에 새로 삽입하는것이 아니라
- b자리 -> p로변경
- c자리 -> b로변경
- d자리 -> c로변경
- 마지막에 d삽입
형식으로 모든 요소가 한칸씩 밀려나게 됩니다. 그냥 새로추가해주기만 할뿐인데 이런 복잡한 과정을 거치게됩니다.
console.log(arr)// [a,p,b,c,d]이렇게 변경된 배열에서 a를 삭제한다면 어떻게 될까요?
- a -> p
- p -> b
- b -> c
- c -> d
- 마지막 칸 삭제
배열에 요소를 추가하고 삭제하는 과정에서 컨트롤하는 요소외의 다른 요소들도 모두 영향을 받고있습니다. 매우 비효율적이죠.
이런 부분을 개선하기 위해서 Key를 사용해야합니다.
Key를 사용하면 배열내의 요소들이 리렌더링되는 과정에서 순서를 보장받을 수 있기때문입니다.
어떤 값을 key 로 사용해야할까요
주로 Key로 이용되는 값은 고유한 값입니다. 배열의 인덱스를 사용하는 방법이 있지만 유동적으로 값이 변경되는 배열의 경우 위에 보았던 문제가 발생하여 성능을 저하시킵니다.
인덱스는 사용하면 안되나요?
사용해도 됩니다. 다만 아래의 경우만 사용하셔야합니다.
- 배열의 요소들이 변경되지 않는다는 조건
- 배열의 요소에 id가 없는경우
- 배열의 요소가 재배치 되거나 필터되지 않는경우
정리
배열을 리렌더링하는경우 내부 요소의 변화로인하여 비효율적으로 렌더링이 많이 일어나게 되는데, 이러한문제를 개선하려면 배열요소에 Key값을 주어 순서를 보장하면된다.
배열에 인덱스를 key로 사용하는 경우는 한정적이므로 지양해야한다.
