[React] 배열 렌더링

벨로퍼트와 함께하는 모던 리액트를 학습하여 작성했습니다.

https://react.vlpt.us/

---

 

1.배열 렌더링

리액트에서 배열을 렌더링하는 방법은 주로 배열의 map 메서드를 사용하여 배열의 각 요소를 컴포넌트로 변환하는 것입니다. 이때 각 요소에는 고유한 key 속성을 제공해야 합니다.
key 속성은 리액트가 각 요소를 고유하게 식별하는 데 사용되며, 효율적인 업데이트를 돕습니다.

 

 

 

각 요소에 고유한 id를 key로 사용하여 map 메서드를 통해 렌더링합니다.

import React from 'react';

function NameList() {
  const names = [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
    { id: 3, name: 'Charlie' }
  ];

  return (
    <ul>
      {names.map((person) => (
        <li key={person.id}>{person.name}</li>
      ))}
    </ul>
  );
}

export default NameList;

 

 

 

2.key에 따른 업데이트 방식

Key가 없으면 요소를 추가하면 리액트는 모든 요소를 재렌더링할 수 있으며, 이는 성능 저하와 예상치 못한 버그를 유발할 수 있습니다.

Key가 있으면 각 요소를 고유하게 식별하여, 요소의 위치가 바뀌어도 고유성을 유지합니다. 이는 리액트가 변경된 부분만 효율적으로 업데이트할 수 있게 도와줍니다.