리스트와 Key

react.js 공식문서 MainConcept 8. 리스트와 key

 

1. 리스트란?

배열을 엘리먼트로 반복해서 출력한 결과물을 말합니다.

 

2. 사용하는 이유

반복적인 컴포넌트 및 값을 호출할 때 편리합니다. (반복문을 사용하는 이유와 같은..)

 

3. 사용방법

 1) map을 이용하여 배열 반복 실행

See the Pen List of Numbers With Index by sujeong91 (@sujeong91) on CodePen.

 

4. 적용

 1) 리스트 여러개 호출

 

* key

1. key란?

엘리먼트 리스트를 만들때 포함해야하는 특수한 문자열 속성.

 

2. 사용하는 이유

Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다. key는 엘리먼트에 안정적인 고유성을 부여하하기 위함입니다.

고유한 값이 기존에 없었던 것이라면? 추가

고유한 값의 위치가 바뀌었다면? 변경

고유한 값이 업데이트 할 요소에 없다면? 삭제

 

2. key의 특징

 1) 형제 사이에서만 고유한 값이면 됩니다. 리스트 항목들 간에서의 구별이 필요한 것이기 때문입니다.

 2) props.key는 읽을 수 없습니다. ( 고유의 기능 외에 사용 불가 )

 3) index로 지정하는 것을 최대한 피합니다. 특히, 항목의 순서가 바뀔 여지가 있는 것이라면 사용하면 안됩니다.