React에서 key 값.

이상철·2021년 10월 3일
0

React

목록 보기
3/8
post-thumbnail

KEY

Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다.
key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다.

class ForKey extends React.Component {
	
	const forKey = [1,2,3,4,5]
	const listItem = forKey.map((element.idx) => (
		<li key={idx}> {element} <li>
	))
     element      key
        1	   0
        2	   1
        3	   2
        4          3
        5          4
와 같이 고유의 번호가 새겨집니다.
}

key를 선택하는 가장 좋은 방법은 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별할 수 있는 문자열을 사용하는 것이고 대부분의 경우는 데이터의 ID를 key값으로 사용합니다.
랜더링 한 항목에 대한 안정적인 ID가 없다면 최후의 수단으로 항목의 인덱스를 key로 사용할 수 있습니다.

하지만 항목의 순서가 바뀔 수 있는 경우 key에 인덱스를 사용하는 것은 권장하지 않습니다.
이로 인해 성능이 저하되거나 컴포넌트의 state와 관련된 문제가 발생할 수 있습니다.
리스트 항목에 명시적으로 key를 지정하지 않으면 React는 기본적으로 인덱스를 Key로 사용합니다.

정리하자면

각각 list 내의 child는 unique한 Key Prop을 가져야한다.
이 말은 모든 React의 element 들은 유일해야 하고,
내가 이들을 list안으로 집어넣을 때,
이 녀석들은 유일성을 잃어버린다.
React의 모든 element 들은 다르게 보일 필요가 있고
Key 값은 기본적으로 React 내부에서 사용하기 위함이다.

참고자료 - 리액트 공식문서

profile
헤더부터 푸터까지!!!

0개의 댓글