[React] 리스트 렌더링 key

코드잇 스프린트 4기

7주 차 위클리 페이퍼

사용

key는 리액트에서 DOM 요소를 식별하는 유일한 수단이다.

리스트의 요소에서 변경이 있는 요소만 리렌더링을 수행한다.

const arr = ['a', 'b', 'c', 'd'];

{arr.map((item) => (
  <li>{item}</li>
))}

key를 등록하지 않으면 리스트의 요소가 추가, 수정, 삭제 되면 리액트는 정확히 어떤 반영이 되었는 지 알 수 없기 때문에 변경이 없는 요소까지 리렌더링이 수행된다.

const arr = ['a', 'b', 'c', 'd'];

{arr.map((item) => (
  <li key={item}>{item}</li>
))}

각 요소를 식별할 수 있는 고유의 key를 부여하면 리액트는 효율적인 DOM 트리를 업데이트할 수 있다.

key는 리스트의 요소 안에서 고유한 값이면 된다. 다른 리스트의 요소와 동일한 key를 사용해도 된다.

key는 변경되지 않아야 한다. 리스트의 index를 key로 설정하면 요소의 변경에 의해 index가 바뀌어 key가 꼬이게 된다.

감사합니다.

참고 자료