[Main] React map함수 사용시 key입력 이유! (+주의사항)

안녕하세요 현고미 입니다!
이번에는 React의 map을 사용한 list의 반복에서 key를 사용해야하는 이유에 대해 알아보겠습니다.

 

React에서는 배열을 엘리먼트 리스트로 변환할 때 map 함수를 자주 사용합니다.

예를 들어, 다음과 같이 numbers 배열을 <li> 엘리먼트로 만들 수 있습니다.

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) => <li>{ number }</li>);

 

그러나 이 코드를 실행하면 콘솔에 다음과 같은 경고가 표시됩니다.

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

 

이 경고는 리스트의 각 항목에 key라는 특수한 속성을 넣어야 한다는 것을 의미합니다.

key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다.

 

key를 선택하는 가장 좋은 방법은 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별할 수 있는 문자열을 사용하는 것입니다. 대부분의 경우 데이터의 ID를 key로 사용합니다.

 

 

예를 들어, 다음과 같이 작성할 수 있습니다.

const todoItems = todos.map((todo) =>
  <li key={todo.id}>
    {todo.text}
  </li>
);

 

렌더링 한 항목에 대한 안정적인 ID가 없다면 최후의 수단으로 항목의 인덱스를 key로 사용할 수 있습니다.

 

 

예를 들어, 다음과 같이 작성할 수 있습니다.

const todoItems = todos.map((todo, index) =>
  <li key={index}>
    {todo.text}
  </li>
);

 

하지만 항목의 순서가 바뀔 수 있는 경우 key에 인덱스를 사용하는 것은 권장하지 않습니다.

이로 인해 성능이 저하되거나 컴포넌트의 state와 관련된 문제가 발생할 수 있습니다.

key는 전체 범위에서 고유할 필요는 없고, 형제 사이에서만 고유하면 됩니다. 

또한, key는 컴포넌트에 전달되는 props 중 하나가 아니라서 컴포넌트 내부에서 접근할 수 없습니다.

 

 

예를 들어, 다음과 같이 작성할 수 있습니다.

function ListItem(props) {
  return <li>{props.value}</li>;
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <ListItem key={number.toString()} value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

 

 

이상으로 React의 map을 사용한 list의 반복에서 key를 사용해야하는 이유에 대해 알아보았습니다.

key는 React가 리스트를 효율적으로 관리하고 렌더링하기 위해 필요한 속성입니다.

각 항목에 고유한 값을 할당하여 key로 사용하시기 바랍니다.

 

오늘도 긴 글 읽어주셔서 감사합니다 ^^

-현고미 올림-