리액트에서의 KEY

✨리액트에서의 key

React 공식 문서 - React에서 Key가 필요한 때와 이유

리액트에서는 Key 프롭을 사용해서 컴포넌트의 동일성을 식별합니다.
따라 key는 고유해야하며, key는 변경되어서는 안됩니다.

또한 리렌더링을 최적화합니다. 고유한 key를 가지고 있다면, 리액트는 변경된 내역만 확인하고 다시 렌더링하여 성능을 향상시킵니다.

📘리스트 렌더링

배열을 map을 사용해서 렌더링을 할 때 key를 설정하지 않으면 다음과 같은 오류가 발생한다. 고유한 식별값인 key가 설정되지 않았다는 오류이다.

Warning: Each child in a list should have a unique “key” prop.

Q. key를 지정하는 이유는 무엇인가요?

key값을 바탕으로 업데이트된 아이템만 업데이트를 할 수 있도록 설정하기 위해 key값을 지정합니다.

Q. key값을 꼭 설정해야 할까요?

key값을 설정하지 않는다면, 리액트는 배열의 모든 요소를 순차적으로 비교하며 변경된 요소를 확인해야합니다. 따라 성능이 저하됩니다.

Q. key값으로 배열의 index값을 설정하는건 안되나요?

아이템이 업데이트되거나 삭제되면 배열의 순서가 변경되고, 아이템을 렌더링하는 순서가 변경됩니다. 따라 index를 사용하면 종종 혼란스러운 버그가 발생하기도 하기때문에 index값을 사용하는 것을 지양하는 것이 좋습니다.

📘잘못된 Key를 지정했을 때 발생하는 문제

• 불필요한 DOM 수정(DOM을 조작하는 것은 성능 비용이 큰 일이므로, 렌더링 성능 저하가 일어남)
• 불필요한 사이드 이팩트(useEffect)를 발생시킴
• CSS 등의 방법으로 트랜잭션이 적용되면, 엉뚱한 트랜지션 효과가 발생할 수도 있음

📘 KEY를 활용한 예

list 배열을 렌더링

const MenuList = ({ list }: { list: MenuProps[] }) => {
  return (
    <ListContainerStyle>
      <Row>
        {list.map((coffee) => (
          <MenuItem key={coffee.name} {...coffee} />
        ))}
      </Row>
    </ListContainerStyle>
  );
};

export default MenuList;

📘 반복문외 KEY를 활용한 예

일반 컴포넌트에서 key 프롭을 지정하고, key를 바꿈으로 강제 리마운트 시키기

• videoId가 변하면, VideoPlayer가 다시 생성됨

function MyComponent() {
  return (
    <>
      <VideoPlayer key={videoId} videoId={videoId} />
    </>
  );
}