List와 Key

List 목록

: 같은 아이템을 순서대로 모아 놓은 것

자료구조 : Array 이용

-> Array : JavaScript의 변수나 객체들을 하나의 변수로 묶어 놓은 것

 

Key 열쇠

: 각 객체나 아이템을 구분할 수 있는 고유한 문자열

 

여러 개의 Component 렌더링 하기

 

map()

: 배열에 들어있는 각 변수에 어떤 처리를 한 뒤 리턴하는 것

ex)

const doubled = numbers.map((number) => number * 2);

-> 첫번째 아이템부터 순서대로 각 아이템의 어떠한 연산을 수행한 뒤에 최종 결과를 배열로 만들어서 리턴해줌

 

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

const listItems = numbers.map((number) => <li>{number}</li>);

-> map() 사용해서 numbers 배열에 들어있는 각 숫자를 li 태그로 감싸 리턴함

 

List의 Key

 

key의 값은 같은 List에 있는 elements 사이에만 고유한 값이면 됨

 

key로 값을 사용하는 경우

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

const listItems = numbers.map((number) => <li key = {number.toString()} > {number} </li> );

-> 만약 numbers 배열에 중복된 숫자가 들어 있다면 킷값도 중복되기 때문에 고유해야 한다는 킷값의 조건이 충족되지 않음

 

key로 id를 사용하는 경우

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

-> id의 의미 자체가 고유한 값이라는 것이기에 킷값으로 사용하기에 적합함

 

key로 index를 사용하는 경우

const todoItems = todos.map((todo, index) =>

// 아이템들의 고유한 ID가 없을 경우에만 사용해야 함

<li key = {index} > {todo.text} </li>);

-> index 또한 고유한 값이기에 사용해도 괜찮음 but, 배열에서 아이템의 순서가 바뀔 수 있는 경우에는 키값으로 인덱스를 사용하는 것을 권장하지 않음

 

* map() 함수 안에 있는 Elements는 꼭 key가 필요하다!!