[React] 배열 렌더링하기

function UserList(){
    const users = [
        {
            id: 1,
            username: 'kim',
            email: 'kim@naver.com'
        }, 
        {
            id: 2,
            username: 'test',
            email: 'test@naver.com'
        },
        {
            id: 3,
            username: 'aa',
            email: 'aa@naver.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[2].email}</span>
            </div>
        </div>
    );
}

현재 위 코드는 배열을 랜더링하는데 똑같은 코드를 사용하고 있습니다.

 

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: 'kim',
            email: 'kim@naver.com'
        }, 
        {
            id: 2,
            username: 'test',
            email: 'test@naver.com'
        },
        {
            id: 3,
            username: 'aa',
            email: 'aa@naver.com'
        }
    ]

    return(
        <div>
            {
                users.map(
                    user => (<User user={user} key={user.id} />)
                )
            }
        </div>
    );
}

export default UserList;

User 컴포넌트는 props로 user 값을 받아옵니다. 

map() 함수를 통해 user라는 인자를 가져와서 User 컴포넌트를 렌더링해줍니다. 

 

배열을 랜더링할 때 key가 있어야하는 이유는 고유값이 있는 객체들이 있고 key로 설정하게 된다면, 각 렌더링 한 결과물에서 어떤 객체를 가르키고 있는지 알고 있습니다. key가 있으면 어떤 element가 어떤 데이터를 가르키고 있는지 알고 있기 때문에, 객체가 추가되거나 삭제된다면, 효율적으로 업데이트 할 수 있습니다. 

고유값이 없는 자리에는 index를 넣을 수 있지만, 비효율적입니다. 

 

배열을 렌더링 할 때는 key가 있어야하고, 고유값(Unique) 한 값이 없을 경우 index를 넣을 수 있지만 지양해야한다.