React Study

React - λ°°μ—΄ λžœλ”λ§

eddie0329 2020. 12. 3. 00:07
λ°˜μ‘ν˜•

πŸ“Œ λͺ©λ‘

  • 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만 μ‚¬μš©ν•΄μ„œ κ·ΈλŸ°μ§€ 되게 쒀더 μžλ°”μŠ€ν¬λ¦½νŠΈμŠ€λŸ½λ„€μš”. 그럼 λ‹€μŒ ν¬μŠ€νŒ…μ—μ„œ λ§Œλ‚˜μš”~ μ•ˆλ…•!

λ°˜μ‘ν˜•