React map key props

5932 단어 ReactReact

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를 사용할 수 있다.

좋은 웹페이지 즐겨찾기