react에서 map()사용 시 배열 항목의 key

강의를 듣다가 강사님께서 post 배열에 id가 있는데 key값을 index로 하셨길래.. 생각이 나서 정리

<div className="container">
  <div className="board">
    {post.map((postInfo: Post, idx) => {
      return (
        <div className="post" key={idx} onClick={handleDetailClick}>
          <h3>
            {postInfo.title} <span onClick={handleLikeClick}>❤️</span>
            {like}
          </h3>
          <p>{postInfo.date}</p>
        </div>
      );
    })}
  </div>
</div>

 

JSX {} 안에서는 for를 이용해서 반복문을 사용할 수 없다. 대신 map 함수로 반복을 할 수 있다.

리액트에서 배열을 렌더링 할 때에는 key 라는 속성을 설정해야한다.

key 는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는다.

 

key를 설정하지 않으면 브라우저의 콘솔창에 아래와 같은 에러가 나타난다.

 

key의 존재가 필요한 이유? key를 index로 설정하는 것을 권장하지 않는 이유?

애플리케이션이 중단되고 잘못된 데이터가 표시될 수 있다.

key 는 React가 DOM 요소를 식별하는 데 사용하는 유일한 것이다.

 

항목을 목록에 추가하거나 중간에 항목을 제거하면 어떻게 될까?

**key 가 이전과 동일 하면 React는 DOM 요소가 이전과 동일한 구성 요소를 나타내는 것으로 가정한다.**

const array = ['a', 'b', 'c', 'd'];
array.map(item => <div>{item}</div>);

(명시적으로 key를 지정하지 않으면 React는 기본적으로 인덱스를 key로 사용)

• b와 c 사이에 z를 삽입하면 ▶️ 리렌더링할 때 기존의 c → z, d → c로 바뀌고, 맨 마지막에 d가 새로 삽입됨.
  (b와 c 사이에 새 div 태그를 추가 하는 것이 아님!)

출처 :  https://react.vlpt.us/basic/11-render-array.html

• a를 제거하면 ▶️ 기존의 a → b, b → z, z→ c, c → d로 바뀌고, 맨 마지막에 있던 d가 제거됨

고유 값으로 key값을 설정하고 렌더링하면

const array = [
  {
    id: 0,
    text: 'a'
  },
  {
    id: 1,
    text: 'b'
  },
  {
    id: 2,
    text: 'c'
  },
  {
    id: 3,
    text: 'd'
  }
];

array.map(item => <div key={item.id}>{item.text}</div>);

 

출처 :  https://react.vlpt.us/basic/11-render-array.html

이제야 수정되지 않는 기존의 값은 그대로 두고 원하는 곳에 내용을 삽입하거나 변경,삭제한다.

‼️ 그래서 배열을 렌더링할 때 고유한 key 값의 존재가 중요하다

 

아래 3가지 조건을 모두 만족하면 key로 index를 사용해도된다.

1. 배열과 각 항목이 static이며 computed되지 않고 변하지 않는다.
2. 배열의 항목에 id가 없다.
3. 배열이 rerendered 되거나 filtered되지 않는다.

index가 아닌 key를 얻을 수 있는 방법

출처 : https://react-ko.dev/learn/rendering-lists

 

 

 

참고 자료

https://react.vlpt.us/basic/11-render-array.html

https://robinpokorny.medium.com/index-as-a-key-is-an-anti-pattern-e0349aece318

https://medium.com/sjk5766/react-배열의-index를-key로-쓰면-안되는-이유-3ce48b3a18fb

https://react-ko.dev/learn/rendering-lists