# List

= 목록

Array 배열
= JavaScript의 변수나 객체들을 하나의 변수로 묶어 놓은 것

# Key

= 열쇠

열쇠는 다 모양이 다르다

Key: 각 객체나 아이템을 구분할 수 있는 고유한 값
= 리스트에 존재하는 아이템들을 구분하기 위한 고유한 문자열

# 여러 개의 Component 렌더링 하기

• 리스트, 키를 사용하여 반복되는 다수의 엘리먼트를 렌더링한다.
  
  

# map()

mapping: 한쪽 아이템과 다른 한쪽 아이템을 짝지어 주는 것

# 기본적인 List Component

• 경고문 출력 이유: 현재 각 아이템에 key가 없기 때문이다.

List의 Key

key의 특징
아이템을 구분하기 위한 고유한 문자열
예) 주민등록번호, 학번, 핸드폰번호, 여권번호 ...

key의 값은 같은 리스트에 있는 Elements 사이에서만 고유한 값이면 된다

numbers 리스트에 중복되는 키 값이 존재하는 경우, 키값이 중복된다는 경고 메세지가 출력된다. 하지만 배열에서 아이템의 순서가 바뀔 수 있는 경우에는 키 값으로 인덱슬르 사용하는 것을 권장하지 않습니다. 성능에 부정적인 영향을 끼칠 수 있고 컴포넌트의 state와 관련하여 문제를 일으킬 수도 있기 때문입니다.

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

리액트 개발을 처음 하는 분들이 가장 많이 하는 실수가 바로 map() 함수를 사용하면서 엘리먼트의 키 값을 넣지 않는 것입니다. 그렇기 때문에 이 부분을 꼭 잘 기억하고 넘어가자.