리액트에서 배열을 렌더링하는 방법을 알아보자.
//UserList.js
import React from "react";
function UserList() {
const users = [
{
id: 1,
username: "Sun",
email: "123@naver.com",
},
{
id: 2,
username: "Jung",
email: "456@naver.com",
},
{
id: 3,
username: "Kim",
email: "789@naver.com",
},
];
return (
<div>
<div>
<b>
{users[0].username} <span>({users[0].email})</span>
</b>
</div>
<div>
<b>
{users[1].username} <span>({users[1].email})</span>
</b>
</div>
<div>
<b>
{users[2].username} <span>({users[2].email})</span>
</b>
</div>
</div>
);
}
export default UserList;
위와 같이 만들었을때 중복되는 코드가 상당히 많은 것을 볼 수 있다. 이를 해결하기 위해 UserList.js 에 또 하나의 컴포넌트를 생성하는데 하나의 컴포넌트 파일안에 두개의 컴포넌트를 생성해도 문제가 없다.
function User({ user }) {
return (
<div>
<b>
{user.username} <span>({user.email})</span>
</b>
</div>
);
}
User 라는 컴포넌트를 생성해 props 로 users 의 각 원소를 넣어주고 받은 props 의 username 과 email 을 그려주고, UserLIst 컴포넌트에서 User 을 불러온다.
return (
<div>
<User user={users[0]}></User>
<User user={users[1]}></User>
<User user={users[2]}></User>
</div>
);
하지만 배열이 고정적이지 않고 유동적인 경우 위의 방법을 쓰기에는 어려움이 많다. 이때는 javsscript 의 배열내장함수 map() 을 사용해주면 된다.
return (
<div>
{users.map((user) => (
<User user={user}></User>
))}
</div>
);
map() 을 이용해 user 라는 파라미터를 가져와 User 에 다시 뿌려주면 된다.
이때 출력은 제대로 되지만 콘솔창에
Warning: Each child in a list should have a unique "key" prop.
라는 에러가 뜨게 되는데 key 는 각 원소에 고유값을 줘 리렌더링 성능을 최적화 하게 해주는 역할을 한다.
아래와 같이 key 값으로 각각의 id 를 주면 에러가 사라진다. id 와 같이 고유한 값이 없는 경우 index 를 key 값으로 줘도 되기는 하지만 이는 비효율적이라 그리 추천하지는 않는다.
return (
<div>
{users.map((user) => (
<User key={user.id} user={user}></User>
))}
</div>
);