React에서 key가 하는일이 뭘까요?

개인적인 project를 진행하면서, 인자를 가져올 때나 새로운 메서드를 사용해서 키값을 정해줄 때 오류가 생각보다 나와서 개념을 정리해보고자 올리는 글입니다 📖👀

import React from 'react';

function User({ user }) {
  return (
    <div>
      <b>{user.username}</b> <span>({user.email})</span>
    </div>
  );
}

function UserList() {
  const users = [
    {
      id: 1,
      username: 'velopert',
      email: 'public.velopert@gmail.com'
    },
    {
      id: 2,
      username: 'tester',
      email: 'tester@example.com'
    },
    {
      id: 3,
      username: 'liz',
      email: 'liz@example.com'
    }
  ];

  return (
    <div>
      {users.map(user => (
        <User user={user} />
      ))}
    </div>
  );
}

export default UserList;

위의 UserList는 map으로 새로운 배열을 생성해 나열해주고 있습니다. 결과는 아래 화면과 같습니다.

하지만 뭔가 허전하네요! key값이 필요해보입니다.
key값은 각 원소들이 가지고 있는 고유값으로 설정해야합니다. 😏

---

그렇다면 우리는 평소에 어떻게 key값을 활용하고 있을까요?

짧은 배열로 예를 들어서 설명해보자면,

const array = ['a', 'b', 'c', 'd'];

위 배열을 map으로 새로 렌더링 해보겠습니다.

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

결과값으로는

<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>

이런식으로 나오게됩니다!

그렇다면 우리 여기서 <div>b</div>와 <div>c</div> 사이에 새로운 <div>z</div>를 넣어볼까요?

react 리렌더링이 일어나면, 우리가 <div>z</div>값을 넣고 싶을때, b와 c 사이에 자동으로쏙~하고 들어가는것이 아니라,

<div>c</div>가 <div>z</div>로 바뀌게 되고,
d는 c로 바뀌고, 새로운 d가 삽입되면서 배열이 새로 생성됩니다.

이 과정은 비효율적으로 보이죠?
그냥 <div>z</div>가 b와 c사이로 쏙~들어가면 되는데 왜 이렇게 하는거야!

그래서 필요한게 바로 key값입니다.

객체에 key로 사용할 수 있는 고유값이 있고, 이 값을 key값으로 넣어주게 된다면, 기존의 값을 그대로 두고 원하는 곳에 내용을 삽입하거나 삭제할 수 있습니다.

궁금점 해결완료 ~ 🥰💌

참조 레퍼런스📚
https://react.vlpt.us/basic/11-render-array.html