[6장] 컴포넌트 반복

<ul>태그 내의 <li>태그처럼 반복되는 태그나 내용들이 항상 존재한다. 리액트에선 Array.prototype.map 함수를 이용해 반복되는 컴포넌트를 처리한다.

1. 데이터 배열 → 컴포넌트 배열 변환
배열內 데이터들을 추출해 컴포넌트를 만들어보자. 사실 너무 간단해서 뭐 얘기해줄 거리가 없긴 하다.

아주 잘 돌아간다. 그런데 콘솔창을 열어보면 "key" prop이 없다고 앵앵 댄다. key가 뭘까?

key가 뭐임?

2. key
컴포넌트 배열을 렌더링했을 때 어떤 원소에 변동이 있었는지 알아내기 위해 사용한다. key가 없을 땐 Virtual DOM을 비교하는 과정에서 리스트를 순차적으로 비교하면서 변화를 감지한다. 그러나 key가 있을 땐 어떤 변화가 일어났는지 바로 알아낼 수 있게 된다.

2.1 key값 설정
key값은 언제나 유일해야 한다. 따라서 게시판같은 경우엔 게시물 번호를 key값으로 설정하면 된다. 그러나 위 예시처럼 고유 번호가 없을 땐 어떻게 해야할까? 일단 index로 키 값을 설정할 수 있기는 하다.

const nameList = names.map((name, index) => <li key={index}>{name}</li>)

그러나 index를 키로 사용하면 배열 변경시 리렌더링이 비효율적이게 된다. 그렇다면 진짜 어쩌라는걸까?

2.2 key값 관리하기
index도 사용하지 말라하고 고유한 번호도 없댄다 ㅡㅡ 근데 대체 뭐가 문제인가? 없으면 만들면 그만이다. 아래 예시와 같은 기능을 구현하면서 키값을 부여하고 관리해보자

이런 화면을 구성한다 치면 뭐가 필요할까?

3. 정리
반복되는 데이터 렌더링은 map 함수를 이용했다. 또한 key값을 설정해줘야 효율적인 렌더링이 가능한데 반드시 유일한 값을 설정해줘야 하며 key값이 중복되면 렌더링 과정에서 오류가 발생한다.