리액트 - 배열 렌더링하기

만약에 이런 배열이 있다고 가정해보자

const users = [
    {
        id: 1,
        username: 'carrot',
        email: 'carrot@gamil.com'
    },
    {
        id: 2,
        username: 'apple',
        email: 'apple@gamil.com'
    },
    {
        id: 3,
        username: 'tomato',
        email: 'tomato@gamil.com'
    }
]

이런 배열을 렌더링 하려면 어떻게 해야할까?

우선 UserList.js파일을 만들자.

import React from "react";


function UserList(){
    const users = [
        {
            id: 1,
            username: 'carrot',
            email: 'carrot@gamil.com'
        },
        {
            id: 2,
            username: 'apple',
            email: 'apple@gamil.com'
        },
        {
            id: 3,
            username: 'tomato',
            email: 'tomato@gamil.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>
    )
}

export default UserList;

위와 같이 배열내부의 요소 하나하나를 다 써가면서 구현을 해도 된다.

다만, 배열의 요소가 3개라는 보장은 없다. 10개, 20개가 될 수도 있다.

좀더 효율적인 방법을 사용해보자.

먼저 UserList.js안에 컴퍼넌트를 하나 더 생성한다.

function User({user}){
    return(<div>
        <b>{user.username}</b> <span>({user.email})</span>
    </div>
    );
}

user는 props 값을 받아오면 return 에 적힌 dom에 props값을 추가해서 렌더링 하는 방식이다.

그리고 UserList.js의 return값ㅇ르 바꿔준다.

  return (
        <div>
            {
                //<User user={users[0]}
                //<User user={users[1]}
                //<User user={users[2]}
                users.map(
                    user => (<User user={user} key={user.id}/>)
                )
            }
        </div>
    )

map 함수를 사용해서 User컴포넌트를 이용한 렌더링을 반복적으로 수행한다는 뜻이다.

key={user.id}를 추가한 이유는 각 원소들 마다 고유값을 부여함으로써 리렌더링 성능을 최적화 시킬수 있기 때문이다.

키 값이 있어야 엘리먼트가 어떤 데이터를 가리키고 있는지를 알 수 있기 때문에 효율적인 렌더링이 가능하다는 것이다.