List 와 key

List

배열은 자바스크립트의 변수나 객체를 하나로 묶어놓은것

key

열쇠는 모양이 다 다르다. 즉, 리스트 아이템들을 구분하기 위한 고유한 문자열이다.

List의 key

리스트아이템들은 고유한 문자열인 key를 가지고 있어야한다.
중요한점은,
key의 값은 같은 list에 있는 element사이에서만 고유한 값이면 된다.
numList1과 numList2에 있는 key값이 같아도, 내부에서 같은게 아니기때문에 상관없다는것이다.

const numList1 = [{key:'a',value:'1111'},{key:'b',value:'2222'}];
const numList2 = [{key:'a',value:'1111'},{key:'b',value:'2222'}];

1. key로 값을 사용하는경우

key값으로 숫자의 값을 사용한경우, 지금은 numbers배열의 숫자가 중복되지 않기때문에 상관없지만 중복되는경우에는 key값도 중복되기때문에 에러가 발생한다.

const numbers = [1,2,3,4,5];
const ListItems = numbers.map((number) => 
	<li key={number.toString()}>{number}</li>                             
);

2. key로 id를 사용하는경우

key값으로 id를 사용한경우, id의 의미자체가 고유한것이므로 key값으로 사용하기 적합하다.

const todoItems = todos.map((todo) => 
   <li key={todo.id}>{todo.text}</li>
);

3. key로 index를 사용하는경우

map함수에서 두번째파라미터로 제공해주는 index를 사용하는경우, 이때 index는 배열내에서 현재아이템의 index를 의미한다.
index도 고유한값이기때문에 key값으로 사용해도되지만, 배열에서 아이템의 순서가 바뀔수있는 경우에는 권장하지않는다.
item의 고유한 id가 없을경우에만 사용한다.
리액트는 key값을 명시적으로 넣어주지않으면 기본적으로 인덱스를 key값으로 사용한다.

const todoItems = todos.map((todo, index) =>
  <li key={index}>{todo.text}</li>
);

여러개의 컴포넌트 렌더링

list와 key를 사용하여 여러개의 컴포넌트를 렌더링 할 수 있다.
이럴때 map()함수를 사용하면 편하다.
map()함수 안에 있는 element는 꼭 key가 필요하다.