React - 배열 랜더링

📌 목록

• Introduction
• rendering array
• Conclusion

📌 Introduction

안녕하세요. 오늘은 array의 항목들을 랜더링하는 방법에 대해서 알아보겠습니다. 해당 내용은 vue에서 v-for과 비슷합니다.

📌 rendering array

어떻게 array를 랜더링 할까요? 방법은 map을 이용하는 겁니다.

import React from "react";

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

function UserList() {
  const users = [
    {
      id: 1,
      username: "eddie",
      email: "eddie@gmail.com",
    },
    {
      id: 2,
      username: "sam",
      email: "sam@gmail.com",
    },
    {
      id: 3,
      username: "tom",
      email: "tom@gmail.com",
    },
  ];
  return (
    <div>
      // ⭐️ 여기서 이렇게 배열을 랜더링 해주게 돼요
      {users.map((user) => (
        // key값은 항상 설정을 해주세요 !
        <User user={user} key={user.id} />
      ))}
    </div>
  );
}

export default UserList;

🚨 key의 중요성

만약에 키가 없다면 해당 돔은 이렇게 비효율 적으로 작동하게 됩니다.

A
B
C

위의 배열에서 만약에 중간에 Z가 들어온다면 이렇게 작동을 해요.

1) 2) 3)
A A A
Z Z Z
B B B
C

이렇게 비효율 적으로 랜더링 하기때문에 꼭 key를 설정해주세요!

📌 Conclusion

오늘은 배열을 랜더링하는 방법에 대해서 배워보았습니다. 참 뭔가 v-for만 사용해서 그런지 되게 좀더 자바스크립트스럽네요. 그럼 다음 포스팅에서 만나요~ 안녕!