[React]배열 렌더링하기

 

userList.js

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: "홍길동",
      email: "hong@hong.com",
    },
    {
      id: 2,
      username: "임꺽정",
      email: "lim@lim.com",
    },
    {
      id: 3,
      username: "최배달",
      email: "choi@choi.com",
    },
  ];

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

export default UserList;

 

배열 객체를 만들어놓고 객체를 하나씩 찍어줄 것인데, 이럴 땐 map을 사용한다. map은 배열 안의 각 원소를 변환할 때 사용되며, 이 과정에서 새로운 배열이 만들어 주는데, 함수를 받아와서 실행시켜 배열에 추가하는 방식이다.

users라는 배열을 가지고 있는 녀석을 map을 사용해 각각의 원소를 user로 받은것이다.

그리고 return값에 보면 key값이 들어가 있는데, key값이 없으면 리렌더링 할 때 빨리 찾을 수 없어서 key값을 넣어달라고 에러가 뜬다.

각 배열의 원소가 어떤 것을 렌더링하고 있는 건지 잘 모르기 때문에 리스트들이 새로 생성이 되어버린다.

 

예를 들면 array = [1,2,3,4]가 존재하고 그것을 <div> 태그 안에 하나씩 넣어 출력을 하였다.

<div>1<div>
<div>2<div>
<div>3<div>
<div>4<div>

그런데 array에 2와 3 사이에 5가 들어온다면 array = [1,2,5,3,4]가 된다면 리액트에서는

<div>1<div>
<div>2<div>
<div>3<div> => <div>5<div>
<div>4<div> => <div>3<div>
<div>4<div>

 

2와 3 사이에 추가가 되는 것이 아니라 3이 있던 위치에 5가 새롭게 생성되고 4가 있던 위치에 3이 새로 생성되고 아래에 4가 또다시 생성이 된다. 그렇기 때문에 매우 비효율적이다. 허나 key 값을 넣어준다면 우리가 생각했던 대로 이루어진다.

<div key={1}>1<div>
<div key={2}>2<div>
<div key={3}>3<div>
<div key={4}>4<div>

 

이렇게 있는 상황에서 5가 들어온다면 2와 3 사이를 key값으로 위치를 찾아내고 들어가게 된다.

<div key={1}>1<div>
<div key={2}>2<div>
<div key={5}>5<div>
<div key={3}>3<div>
<div key={4}>4<div>

 

그렇기 때문에 key의 중요성을 알 수 있다.