여러 개의 Component를 렌더링하기

List

그냥 같은 아이템(또는 컴포넌트)를 모아둔 목록. = 배열임

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

map()

배열의 아이템 하나하나에 대하여 어떤 명령을 수행하고 그 결과를 반환한다.

const nums = [ 1, 2, 3, 4, 5 ];
const listItems = nums.map((num) => <li>{num}</li>);
                           
ReactDOM.render(
  <ul>{listItems}</ul>,
  document.getElementById('root')
);

주의

map()을 쓸 때, 각 아이템은 고유한 key를 가지고 있어야 한다.

Key

각 객체나 아이템을 구분하는 고유한 값. List에선 문자열이 Key이다.

또한 고유한 값이라고 했지만, 이는 List 내부에서만 한정되는 얘기이므로 같은 List 내의 아이템만 고유한 값이면 된다.

방법 1. 아이템의 값을 key로 사용

만약, 아이템 중에 같은 값이 존재할 경우 중복되는 문제가 생김

const nums = [ 1, 2, 3, 4, 5 ];
const listItems = nums.map((num) =>
	<li key={num.toString()}>
		{num}
	</li>
);

방법 2. id 사용하기

아이템을 생성할 당시에 id란 필드를 추가한다.

const nums = [ 1, 2, 3, 4, 5 ];
const listItems = nums.map((num) =>
	<li key={num.id}>
		{num}
	</li>
);

방법 3. index 사용하기

사실 map()은 추가적인 파라미터로 index란 변수가 존재한다. (필수가 아니라 생략하는 경우도 있음) 이를 이용해 key를 설정한다. 다만, 리스트의 순서가 바뀔 경우엔 문제가 생길 수 있음.

const nums = [ 1, 2, 3, 4, 5 ];
const listItems = nums.map((num, index) =>
	<li key={index}>
		{num}
	</li>
);

---

Referance

[인프런] 처음 만난 리액트(React) 강의 - 소플