key의 중요성 & 의미
리액트 key 값의 의미
리액트를 사용할때 key 값을 사용할 때 index를 사용하면 위험하다고는 알지만 어떠한 이유때문에 위험하고 key값이 왜 필요한지는 정확히 모르고있다. 그러한 의미에서 포스팅을 써보려고 한다.
리스트 아이템
import React from 'react'
const KeyExample = () => {
const numbers = [1, 2, 3, 4, 5]
const listItems = numbers.map(number => <li>{number}</li>)
return <ul>{listItems}</ul>
}
export default KeyExample이렇게 코드를 작성하면 콘솔창에는 unique "key"라는 오류 문구가 나와 에러를 만날 수 있다.
import React from 'react'
const KeyExample = () => {
const numbers = [1, 2, 3, 4, 5]
const listItems = numbers.map((number, index) => (
<li key={index}>{number}</li>
))
return <ul>{listItems}</ul>
}
export default KeyExample이렇게 하면 오류는 해결된다 하지만 순서가 바뀔 수 있는 리스트 아이템에는 key값에 index를 쓰는 것은 위험한 일이다.
index를 key 값으로 사용하면 위험한 이유
결론부터 말하면 원하지 않는 데이터가 보여질 수 있기 때문이다. key 값을 index로 사용한 아이템은 텍스트를 적은 것이 계속 맨 처음 아이템에 고정되어 있는 것을 볼 수 있다. 이러한 에러로 리스트에는 index값이 아닌 고유한 key 값을 사용해야하는 것이다.
리액트 내부에서 key값
- 개발자가
key prop을 통해, 여러 렌더링 사이에서 어떤자식 엘리먼트가 변경되지 않아야 할지 표시 해줄 수 있다.
위에서 말한 특성때문에 key를 고유한 값으로 사용해야 하는 것이다. 리액트는 자식들이 key를 가지고 있으면 key를 통해 자식들이 일치하는지 확인하고 그래로 데이터를 렌더링한다. 이러한 이유때문에 여러 id에서 동일한 index가 발생할 수 있기때문에 index의 사용은 위험하다.
출처
