react에서 그냥 map( )을 사용하게 되면

이와같은 경고 메세지를 보게된다.

key란 무엇일까?

key 란?

react에서 key 는 컴포넌트 배열을 렌더링했을 때 어떤 원소에 변동이 있었는지 알아내려고 사용한다.

예를 들어 유동적인 데이터를 다룰 때는 원소를 새로 생성할 수도, 제거할 수도, 수정할 수도 있다. key 가 없을 때는 Virtual DOM을 비교하는 과정에서 리스트를 순차적으로 뱌교하면서 변화를 감지한다. 하지만 key가 있다면 이 값을 사용하여 어떤 변화가 일어났는지 더욱 빠르게 알아낼 수 있다.

Key 설정

key값을 설정할 때는 map 함수의 인자로 전달되는 함수 내부에서 컴포넌트 props를 설정하듯이 설정하면 된다.
key 값은 언제나 유일해야 한다. 따라서 데이터가 가진 고윳값을 key 값으로 설정해야한다.

const articleList = articles.map(article => (
	<Atricle
    	title = {article.title}
        writer = {atricle.writer}
        key = {article.id}
    />
);

하지만 데이터에 이런 고유번호가 없을 시에는 콜백 함수의 인수인 index값을 사용하면 된다.

index값은 고유한 값이 없을 때만 index값을 key로 사용해야한다. 왜냐하면 index를 key로 사용하면 배열이 변경될 때 효율적으로 렌더링하지 못하기때문!