[코드잇 풀스택 1기] key설정

React Key를 왜 사용해야할까 ??

Key는 리액트가 어떤 항목이 변경, 추가 또는 제거되었는지를 식별할때 사용합니다.

key가 없다면, 리액트는 DOM 요소를 효율적으로 업데이트하는 데 어려움을 겪을 수 있습니다.

 

1. 효율적인 업데이트 : 리액트는 키 를 통해 어떤 항목이 변경, 추가, 제거되었는지를 알 수 있다고 설명드렸습니다.

이를 통해 최소한 DOM 조작으로 필요한 부분만 업데이트할 수 있어 성능을 최적화 할 수 있습니다.

 

2. 컴포넌트 상태 유지 : 키는 컴포넌트의 고유 식별자로 작동하여, 컴포넌트의 상태가 올바르게 유지되도록 도와줍니다.

만약 키가 없다면 리액트는 컴포넌트의 상태를 잘못 유지할 수 있습니다.

 

3. 일관된 렌더링 : 키가 설정되어 있지 않으면 리액트는 배열의 항목들이 어떻게 변했는지 알지 못해, 배열의 요소를 재사용하는 과정에서 예기치 않은 버그가 발생합니다.

 

Key설정 시 주의할 점

const items = [
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
];

const listItems = items.map(item => (
  <li key={item.id}>{item.name}</li>
));

고유하고 안정적인 값을 Key로 사용해야합니다. 

ex) 데이터가 변경되거나 순서가 바뀌면 인덱스가 바뀔 수 있기 때문에 고유 식별자 id를 사용하는것이 좋습니다.

 

// 좋은 예: 배열의 불변성을 유지
const newItems = [...items, { id: 3, name: 'Item 3' }];

// 나쁜 예: 배열을 직접 변형
items.push({ id: 3, name: 'Item 3' });

배열의 요소르 추가, 제거 또는 변경할 때 불변성을 유지해야 합니다.

키가 올바르게 설정 되어있더라도 배열이 변형되면 리액트가 최적화된 렌더링을 수행할 수 없습니다.

 

 

---

 

import React from 'react';

function ItemList({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

const items = [
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' },
];

function App() {
  return <ItemList items={items} />;
}

export default App;

 

위 코드에서 items 배열의 각 항ㅁㄱ에 고유한 id를 key로 사용하여, 리액트가 각 항목을 올바르게 추적하고 최적화된 렌더링을 수행할 수 있도록 합니다.