[React] 배열 렌더링 하기

먼저 비효율적인 방법으로 해 보기

import React from 'react';

function UserList(){
    const users = [
        {
            id:1,
            username: 'velopert',
            email:'public.velopert@gmail.com'
        },
        {
            id:2,
            username: 'sample',
            email: 'tester@example.com'
        },
        {
            id:3,
            username: 'liz',
            email: 'liz@exameple.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;

return 에서 같은 코드가 여러번 사용

하나의 파일에 여러개의 컴포넌트를 정의해도 됨.

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: 'sample',
            email: 'tester@example.com'
        },
        {
            id:3,
            username: 'liz',
            email: 'liz@exameple.com'
        }
    ];


    return (
        <div>
            <User user={users[0]}/>
            <User user={users[1]}/>
            <User user={users[2]}/>
        </div>
    );
}

export default UserList;

먼저 배열이 고정적이라면 이렇게 해 줘도 상관 없겠지만 만약 배열 내용이 바뀐다면?

자바스크립트 배열의 내장함수 map을 사용한다.

map()을 이용하여 객체 배열을 component element형태의 배열로 변환.

key 라는 props 고유값을 지정 해 주는것.
(최적화 위하여.)

// 고유한 값을 key로 설정 해 주어야한다. 
    return (
        <div>
            {
                users.map(
                    user => (<User user={user} key={user.id}/>)
                )
            }
        </div>
    );

user.id 같은 고유한게 없을때는 기본적으로 key={index} 를 사용하게 되어있다.

(user, index) => (<User user={user} key = {index}/>) 이렇게.

index만 넣었을 때는 성능적으로 나아지지는 않음.
key의 역할 :

array라는 배열이 있다.
이 배열을 div앨리먼드로 변환 해 주려고 할 떄.

중간에 z 를 넣어준다면, c가 z로 바뀌고 d가 c로 바뀌고.. 이런식.
비효율적.

각 배열의 원소가 정확히 어떤걸 렌더링 하고 있는지를 잘 모르기 때문.

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: 'sample',
           email: 'tester@example.com'
       },
       {
           id:3,
           username: 'liz',
           email: 'liz@exameple.com'
       }
   ];

// 고유한 값을 key로 설정 해 주어야한다. 
   return (
       <div>
           {
               users.map(
                   user => (<User user={user} key={user.id}/>)
               )
           }
       </div>
   );
}

export default UserList;

key가 있어야 어떤 데이터를 가리키는지 알 수 있다.

배열 렌더링 할 때는 key를 설정해야 효율적으로 렌더링 할 수 있다 .

고유값이 없을 때에는 key에 index를 넣을 수 있지만 비효율적이다.
데이터가 얼마 없고 자주 업데이트 되지 않을때에는 index사용한다고 큰 문제가 되지는 않는다.
index를 key로 사용하면 매우 비효율적으로 업데이트가 된다.