[FE / REACT] key props

💡 결론 : React에서 key를 사용하여 엘리먼트 혹은 컴포넌트의 변화를 감지해 효율적인 DOM 사용을 위해서

 

1. 자식에 대한 재귀적 처리

DOM 노드의 자식들을 재귀적으로 처리할 때, React는 기본적으로 동시에 두 리스트를 순회하고 차이점이 있으면 변경을 생성한다.

<ul>
  <li>Duke</li>
  <li>Villanova</li>
</ul>
 
// 변경
<ul>
  <li>Connecticut</li> // 자식요소 추가
  <li>Duke</li>
  <li>Villanova</li>
</ul>

위와 같은 경우 React는 <li>Duke</li>와 <li>Villanova</li> 종속 트리를 그대로 유지하는 대신 모든 자식을 변경 (다시 렌더링)한다.

React 입장에서 컴포넌트를 반복해서 렌더링 하는 일은 매우 비효율적임!

 

Keys

자식들이 key를 가지고 있다면, React는 key를 통해 기존 트리와 이후 트리의 자식들이 일치하는지 캐치할 수 있고 효율적으로 렌더링 할 수 있다.

key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정하는 것.

<ul>
  <li key="2015">Duke</li>
  <li key="2016">Villanova</li>
</ul>
 
// 변경
<ul>
  <li key="2014">Connecticut</li> // 자식요소 추가
  <li key="2015">Duke</li>
  <li key="2016">Villanova</li>
</ul>

요소에 key를 추가하여 트리의 변환 작업이 효율적으로 수행되도록 수정

 

2. Map()에서의 Key 사용

💡 exam

export default function ListItem({
  onClickTitle,
  badges,
}) {
  return (
    <ListItemLayout>
      <div>
        <div role="button" onClick={onClickTitle} className={styles.title}>
          Issue Example
          {badges &&
            badges.map((badgeProps, idx) => (
              <Badge key={idx} {...badgeProps} />
            ))}
        </div>
        <div className={styles.description}># Description</div>
      </div>
    </ListItemLayout>
  )
}

• map 함수 인자로 전달되는 함수 내부에서 key를 컴포넌트 props를 설정하는 것과 같이 작성함
• key는 요소의 '고유한 값'이어야 한다
  • 단, 항목의 순서가 바뀔 수 있는 경우 순서가 바뀌면 index도 바뀌기 때문에 권장하지 않는다. 성능이 저하되거나 state관련 문제가 발생하기 때문에, 최후의 수단이다.(하단 주의할 점 참고)

 

3. key 사용 시 주의할 점

• key는 반드시 변하지 않고, 예상 가능하며, 유일해야 함
• key 형제 노드에서만 고유하면 됨. 즉, 전역에서 고유할 필요는 없고 해당 배열 안에서만 고유
• 최후의 수단으로 배열의 인덱스를 key로 사용할 수 있다.항목들이 재배열되지 않는다면 이 방법도 잘 동작할 것이지만, 만약 재배열되는 경우 컴포넌트의 state와 관련된 문제가 발생할 수 있음
• 변하는 key(Math.random()으로 생성된 값 등)를 사용하면 많은 컴포넌트 인스턴스와 DOM 노드를 불필요하게 재생성하여 성능이 나빠지거나 자식 컴포넌트의 state가 유실될 수 있다. ⇒ key 의 장점을 살리지 못함