[React] 리액트 Key - 리스트 렌더링

React는 컴포넌트 기반의 UI 라이브러리로, 데이터를 기반으로 동적으로 UI를 렌더링 하는 경우가 많습니다. 특히, 배열 데이터를 기반으로 여러 컴포넌트를 반복해서 렌더링 할 때 배열의 각 항목을 고유하게 식별할 필요가 있습니다. 이때 key prop을 사용하여 React가 각 항목을 효율적으로 처리하고 성능을 최적화할 수 있도록 도와줍니다.

 

 

react key - 커버 이미지

목차

1. key Prop이란?

2. key Prop의 필요성

3. key Prop 사용 방법

4. key의 중요성

추천글

위의 목차를 클릭하면 해당 글로 자동 이동 합니다.

 

1. key Prop이란?

key는 React가 리스트를 렌더링할 때 각 항목을 구분할 수 있도록 도와주는 고유한 값입니다. React는 DOM 업데이트 과정에서 변경된 부분만 효율적으로 업데이트하는데, 이때 리스트 항목들이 어떤 순서로 변경되었는지 또는 어떤 항목이 추가되거나 삭제되었는지를 추적하기 위해 key를 사용합니다. React 공식 문서에서도 key prop의 중요성을 강조하고 있으며, 고유한 key 값이 없을 경우 의도하지 않은 UI 업데이트가 발생할 수 있습니다.

 

2. key Prop의 필요성

1. 성능 최적화: React는 각 항목의 key 값을 기준으로 변경 사항을 추적합니다. 만약 key가 없다면, 모든 항목을 다시 렌더링해야 하기 때문에 성능이 저하될 수 있습니다.

 

2. 올바른 요소 업데이트: key는 React가 요소를 구분하는 고유한 식별자 역할을 하므로, key가 없으면 어떤 항목이 변경되었는지 명확히 알 수 없습니다. 예를 들어, 배열의 순서가 바뀌거나 새로운 항목이 추가될 때 문제가 발생할 수 있습니다.

 

3. key Prop 사용 방법

배열 데이터를 반복적으로 렌더링 할 때는 map 함수 등을 사용하여 배열의 각 항목을 컴포넌트로 변환하고, 이 과정에서 각 컴포넌트에 key 값을 부여해야 합니다.

 

key로 고유한 값을 사용하는 경우

function UserList() {
  const users = [
    { id: 1, name: 'Kim' },
    { id: 2, name: 'Lee' },
    { id: 3, name: 'Kang' },
  ];

  return (
    <ul>
      {users.map((user) => (
        // key prop을 각 항목에 고유한 값으로 설정
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

 

위 코드에서는 todos라는 배열을 map 함수를 통해 반복하여 렌더링 하고 있습니다. 여기서 각 항목에 대해 고유한 id 값을 key prop으로 설정하였습니다.

 

key로 배열의 인덱스를 사용하는 경우

때로는 id와 같은 고유 식별자가 없는 경우가 있을 수 있습니다. 이럴 때 배열의 인덱스를 key로 사용할 수 있습니다. 하지만 인덱스를 key로 사용하는 것은 권장되지 않으며, 특히 배열의 순서가 변경될 가능성이 있는 경우에는 더 큰 문제가 발생할 수 있습니다.

<ul>
  {users.map((user, index) => (
    // 인덱스를 key로 사용 (권장되지 않음)
    <li key={index}>{user.task}</li>
  ))}
</ul>

 

배열의 순서가 변경되면 React는 인덱스가 그대로 유지되기 때문에 예상치 못한 UI 버그가 발생할 수 있습니다. 가능하다면 고유한 식별자를 사용하여 key를 설정하는 것이 좋습니다.

 

4. Key의 중요성

React는 재조정(reconciliation) 과정에서 이전과 새로운 컴포넌트를 비교하여 효율적으로 DOM을 업데이트합니다. 이 과정에서 key가 없거나 적절하게 설정되지 않으면 React는 항목을 올바르게 식별하지 못하고 모든 요소를 다시 렌더링 할 수 있습니다.

function App() {
  const [items, setItems] = useState(['사과', '바나나', '오렌지']);

  const addItem = () => {
    setItems(['포도', ...items]);
  };

  return (
    <div>
      <button onClick={addItem}>과일 추가하기</button>
      <ul>
        {items.map((item) => (
          <li>{item}</li>
        ))}
      </ul>
    </div>
  );
}

 

위 코드에서 새로운 과일을 추가하는 버튼을 클릭하면 목록에 새로운 항목이 추가됩니다. 하지만 key가 없기 때문에 새롭게 추가된 항목과 기존 항목을 구분하지 못하고 전체 목록을 다시 렌더링할 수 있습니다. 이를 해결하기 위해 각 항목에 고유한 key를 설정해야 합니다.

 

 

 

• key prop은 React에서 리스트 항목을 구분하기 위해 사용하는 고유한 값입니다.
• 배열을 렌더링할 때 항목의 고유성을 보장하기 위해 key 값을 설정해야 합니다.
• key가 없거나 적절하지 않으면 성능 저하나 예상치 못한 UI 변경이 발생할 수 있습니다.
• 배열 인덱스 대신 고유한 값을 key로 설정하는 것이 좋습니다.

React의 key prop은 성능 최적화와 정확한 UI 업데이트를 위해 필수적입니다. 각 항목에 고유한 key를 설정하면 React가 더 효율적으로 동작하며, 올바른 렌더링을 보장할 수 있습니다.

 

 

추천글

[React] 리액트 Router - 파라미터 & 쿼리

 

[React] 리액트 Router란?