본문 바로가기
개발일지/React

[3] JSX 키 속성

by 꾸주니=^= 2024. 12. 3.

JSX key 속성은 무엇인가?

리액트에서 요소의 리스트를 나열할 때는 Key를 넣어줘야한다.
키는 react가 변경, 추가 또는 제거된 항목을 식별하는데 도움이 된다. 요소에 안정적인 ID를 부여하려면 배열 내부의 요소에 키를 제공해야한다.



리액트는 가상 돔을 이용해서 바뀐 부분만 실제 돔에 적용!!!

리액트에서는 리스트를 나열할 때 바뀐 부분만 찾을 때 어떻게 할까?
-> key를 이용해서 어떠한 부분이 바뀌었는지 인식할 수 있다.

 

 

key에는 유니크한 값을 넣어주자! (index는 비추천)

index도 0부터 시작해서 유니크한 값을 가지지만, 만약 리스트가 추가되거나 제거되면 해당 리스트들의 key값도 바뀌게 된다.