이 배열을 컴포넌트로 만들어 렌더링 하려면 어떻게 해야할까?
const users = [
{
id: 1,
username: 'velopert',
email: 'public.velopert@gmail.com'
},
{
id: 2,
username: 'tester',
email: 'tester@example.com'
},
{
id: 3,
username: 'liz',
email: 'liz@example.com'
}
];1번째 방법 - 코드를 그대로 작성한다
→ 가장 비효율적임.
import React from 'react';
function UserList() {
const users = [
{
id: 1,
username: 'velopert',
email: 'public.velopert@gmail.com'
},
{
id: 2,
username: 'tester',
email: 'tester@example.com'
},
{
id: 3,
username: 'liz',
email: 'liz@example.com'
}
];
return (
<div>
<div>
<b>{users[0].username}</b> <span>({users[0].email})</span>
</div>
<div>
<b>{users[1].username}</b> <span>({users[1].email})</span>
</div>
<div>
<b>{users[2].username}</b> <span>({users[1].email})</span>
</div>
</div>
);
}
export default UserList;두번째 방법 - 컴포넌트를 재사용 할 수 있도록 새로 만들어준다.
→ 배열이 고정적이라면 상관없지만, 배열의 인덱스를 하나하나 조회해가면서 렌더링하는 방법은 동적인 배열을 렌더링하지 못한다.
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: 'velopert',
email: 'public.velopert@gmail.com'
},
{
id: 2,
username: 'tester',
email: 'tester@example.com'
},
{
id: 3,
username: 'liz',
email: 'liz@example.com'
}
];
return (
<div>
<User user={users[0]} />
<User user={users[1]} />
<User user={users[2]} />
</div>
);
}
export default UserList;3번째 방법 - 동적인 배열을 렌더링하기 위해, map을 사용한다.
→ 배열의 모든 원소가 렌더링되지만, key값이 없기 때문에 오류가 발생한다.
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: 'velopert',
email: 'public.velopert@gmail.com'
},
{
id: 2,
username: 'tester',
email: 'tester@example.com'
},
{
id: 3,
username: 'liz',
email: 'liz@example.com'
}
];
return (
<div>
{users.map(user => (
<User user={user} />
))}
</div>
);
}
export default UserList;4번째 방법 - map을 사용하고, key값을 넣어준다.
- 리액트에서 배열을 렌더링 할 때에는
key라는 props 를 설정해한다.key값은 각 원소들마다 가지고 있는 고유값으로 설정해야 하고. 아래의 코드에선id가 고유 값이 된다.
- 만약 배열 안의 원소가 가지고 있는 고유한 값이 없다면
map()함수를 사용 할 때 설정하는 콜백함수의 두번째 파라미터index를key로 사용하면 된다. - 만약에 배열을 렌더링 할 때
key설정을 하지않으면, 기본적으로 배열의index값을key로 사용하게 되고, 경고메시지가 뜨게 된다. 이렇게 경고 메시지가 뜨는 이유는, 각 고유 원소에key가 있어야만 배열이 업데이트 될 때 효율적으로 렌더링 될 수 있기 때문이다.
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: 'velopert',
email: 'public.velopert@gmail.com'
},
{
id: 2,
username: 'tester',
email: 'tester@example.com'
},
{
id: 3,
username: 'liz',
email: 'liz@example.com'
}
];
return (
<div>
{users.map(user => (
<User user={user} key={user.id} />
))}
</div>
);
}
export default UserList;**key 의 존재유무에 따른 업데이트 방식**
const array = ['a', 'b', 'c', 'd']; // 배열
array.map(item => <div>{item}</div>); // 렌더링만약 위 배열의 b와 c 사이에 z를 삽입하면, 리렌더링 할 때 <div>b</div> 와 <div>c</div> 사이에 새 div 태그를 삽입을 하게 되는 것이 아니라, 기존의 c 가 z 로바뀌고, d 는 c 로 바뀌고, 맨 마지막에 d가 새로 삽입된다.
그 다음에 a 를 제거하게 된다면, 기존의 a 가 b 로 바뀌고, b 는 z 로 바뀌고, z는 c로 바뀌고, c는 d 로바뀌고, 맨 마지막에 있는 d 가 제거된다.
해결법
→ key가 있으면 이 문제는 해결된다.
[
{
id: 0,
text: 'a'
},
{
id: 1,
text: 'b'
},
{
id: 2,
text: 'c'
},
{
id: 3,
text: 'd'
}
]; // 배열
array.map(item => <div key={item.id}>{item.text}</div>); // 렌더링객체에는 이와 같이 key로 쓸 수 있는 고유값이 있고, 이와 같이 렌더링이 된다면 배열이 업데이트 될 떄 key
가 없을 때 처럼 비효율적으로 업데이트 하는 것이 아니라, 수정되지 않는 기존의 값은 그대로 두고 원하는 곳에 내용을 삽입하거나 삭제한다.
때문에, 배열을 렌더링 할 때에는 고유한 key값이 있는것이 중요하며, 만약에 배열안에 중복되는 key가 있을 때에는 렌더링시에 오류메시지가 콘솔에 나타나게 되며, 업데이트가 제대로 이루어지지 않게 된다.
열심히 해볼게요