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λ§ μ¬μ©ν΄μ κ·Έλ°μ§ λκ² μ’λ μλ°μ€ν¬λ¦½νΈμ€λ½λ€μ. κ·ΈλΌ λ€μ ν¬μ€ν μμ λ§λμ~ μλ !