리액트에서 배열 렌더링 하는 방법

배열을 렌더링 하는 방법은 배열 안에 JSX코드를 넣는 것이다. map메서드 등을 사용하면 쉽게 만들 수 있다. 하지만 이런식으로 렌더링을 효과적으로 하기 위해서는 key라는 고유 속성값을 넣어줄 필요가 있다.

import React from 'react';

function UserList(){
    const users = [
        {
            id : 1,
            username : '이름1',
            email: '1112xxx@xxxx.xxx'
        },
        {
            id : 2,
            username : '이름2',
            email: '2223xxx@xxxx.xxx'
        },
        {
            id : 3,
            username : '이름3',
            email: '33343xxx@xxxx.xxx'
        },
    ];
    return (
        <div>
            {
                users.map(
                    user => (<User user={user} key={user.id} />)
                    // key값으로 마땅치 않으면 index를 쓸 수도 있지만 비효율 적이다.
                ) 
            }
        </div>
    );
}

export default UserList;

key는 virtual DOM과 실제 돔을 효율적으로 비교하기 위한 시스템이다.