React map key props
Key
key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는다.
key는 element에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야한다.
const contentComments = {[
{
'id' : 0,
'name': 'day',
'text': '안녕하세요 테스트 중입니다!'
}, {
'id' : 1,
'name': 'young',
'text': 'hi test '
}];
}
contentComments.map((list) =>
<li key={list.id}>
{list.name}
{list.text}
</li>
);
key
는 다른 항목들 사이에서 고유하게 식별할 수 있는 것을 사용한다.
ex) DB 기본키 처럼 대부분의 경우는 data.id 값으로 key로 사용한다.
렌더링 한 항목에 부여할 id
값이 마땅히 없다면 index
를 key로 사용할 수 있다.
contentComments.map((list, index) =>
<li key={index}>
{list.name}
{list.text}
</li>
);
하지만 순서가 바뀔 수 있는 경우에는 key에 인덱스를 사용하는 것은 권장하지 않는다.
이로인해 성능이 저하되거나 state와 관련된 문제가 발생할 수 있다.
만약 리스트에 key를 지정하지 않으면 React는 기본적으로 index를 key로 사용한다.
<div className="main-content">
{mainContentObj.map(( list ) => (
<PostContent mainContentObj={list} key={list.id}/>
))}
</div>
제대로 쓰려면, map() 함수 내부에 element에 key값을 넣어 주는게 좋다.
key는 형제 사이에서만 고유한 값이어야 한다.
key는 배열 안에서 형제 사이에서 고유해야 하고 전체 범위에서 고유할 필요는 없다.
두 개의 다른 배열을 만들 때 동일한 key를 사용할 수 있다.
Author And Source
이 문제에 관하여(React map key props), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@lakedaykk/React-map-key-props저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)