JSX key 속성

• 따라하며 배우는 리액트 A-Z를 수강하며 개인적으로 메모한 내용입니다.

리액트에서 요소의 리스트 (map등) 나열할 때는 key를 사용해야한다. > 재조정할때 가상돔과 다른 점을 찾을 때 키를 이용해 인식할 수 있다. ↔ key값이 없다면 바뀐점을 찾을 수 없어 아예 새로 그려버린다.

test = [
	{
    	id: 1,
        name: "하루"
    },
    {
    	id: 2,
        name: "이틀"
    },
]

{this.test.map((data) =>(
	<div key={data.id}>
		{data.name}
	</div>
))}

key는 유니크한 값이어야하지만 index는 추천하지 않는다. 만약 리스트가 변경되면 순서에 따라 key 값도 바뀌기 때문이다.

{this.test.map((data, index) =>(
	<div key={index}>
		{data.name}
	</div>
))}