React(리액트): 배열 렌더링, key 사용

리액트에서 배열을 렌더링 해야 할 때 어떻게 하는지 알아보자.

 

const users =[
        {
            id: 1,
            username: 'paboke22',
            email: 'paboke22@gmail.com'
        },
        {
            id:2,
            username: 'tester',
            email: 'tester@example.com'
        },
        {
            id: 3,
            username: 'liz',
            email: 'liz@example.com'
        }
    ];

먼저, 다음과 같이 객체를 원소로 가진 배열이 있다.

일단 비효율적인 방법으로 구현해보고 효율적인 방법으로 구현을 해보자.

 

UserList.js

import React, { useState } from 'react'

function UserList() {
    const users =[
        {
            id: 1,
            username: 'paboke22',
            email: 'paboke22@gmail.com'
        },
        {
            id:2,
            username: 'tester',
            email: 'tester@example.com'
        },
        {
            id: 3,
            username: 'guest',
            email: 'guest@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[2].email})</span>
          </div>
        </div>
    )
}

export default UserList;

결과는 다음과 같다.

배열에 접근하는 기본적인 방법으로 작성된 코드다. 똑같은 코드가 3번이나 사용된 것이 마음에 들지 않는다.

이 반복을 간소화 하기 위해 우리는 컴포넌트 하나를 더 만들어 줄 것이다. 하나의 컴포넌트 파일에 두 개의 컴포넌트를 만들어도 상관없다. 파일을 분리해도 되고 같은 파일에 해도 상관없다.

 

UserList.js

import React, { useState } from 'react'

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

    )
}

function UserList() {
    const users =[
        {
            id: 1,
            username: 'paboke22',
            email: 'paboke22@gmail.com'
        },
        {
            id:2,
            username: 'tester',
            email: 'tester@example.com'
        },
        {
            id: 3,
            username: 'guest',
            email: 'guest@example.com'
        }
    ];

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

export default UserList;

'User'라는 함수형 컴포넌트를 하나 더 만들어 주었다. User 컴포넌트는 props로 객체를 받아 객체의 username과 

email을 리턴해주는 역할을 한다. UserList 컴포넌트에서는 차례대로 users 배열의 객체를 넘겨준다. 

이런 식으로 배열이 고정적이라면 user={users [0]}과 같이 넣어줘도 상관없지만 만약 배열의 내용이 바뀐다면 이런 

방식으로는 제한되는 점이 많다. 이럴 땐 자바스크립트의 내장함수 'map'을 사용하면 된다.

 

map함수는 자바스크립트에서 공부를 했었는데, 배열 원소 모두를 제곱하고 싶을 때, 배열의 모든 원소에 변형을 주고 

싶을 때 사용한다고 했었다. 

const array = [1,2,3,4,5,6,7,8];

const square = n => n * n;
const squared = array.map(square);

map에 square라는 함수를 넣어주어 모든 원소가 제곱이 되게 만든 예시다. 결과적으로 squared라는 새로운 배열이 

만들어졌다. 

그래서 우리가 'map'함수를 사용해서 객체 배열 형태로 있는 users 배열을 컴포넌트 element 형태의 배열로 변환을

해주면 된다.

 

import React, { useState } from 'react'

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

    )
}

function UserList() {
    const users =[
        {
            id: 1,
            username: 'paboke22',
            email: 'paboke22@gmail.com'
        },
        {
            id:2,
            username: 'tester',
            email: 'tester@example.com'
        },
        {
            id: 3,
            username: 'guest',
            email: 'guest@example.com'
        }
    ];

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

export default UserList;

방법은 되게 간단하다. 우리가 가진 객체 배열 형태인 user 배열에 map함수를 사용한다. 

map함수에서는 user라는 파라미터를 가져와서 User 컴포넌트를 사용해 렌더링을 해준다. 

 

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

더 효율적으로 배열을 사용하기 위해서는 key값을 설정해 주는 것이 좋다. key는 각 원소들 마다 고윳값을 줌으로써 나중에 리 렌더링 성능을 최적화할 수 있게 해 준다. 위 코드의 user 배열에서 각 객체가 가진 고유값은 'id'이다. 이 고유값을 key로 설정해주면 된다.

 

만약 user.id와 같은 각 객체의 고윳값이 없을 경우는 index를 사용하면 된다. 이 index를 key에 넣어주면 되는데, 

이 상황은 피해주는 것이 좋다. index를 넣어주면 key를 사용하는 의미가 없어지기 때문이다.

 

예를 들어 다음과 같이 고윳값이 있는 객체들이 있고 그 고윳값을 키로 설정하게 된다면 각 렌더링 한 결과물에서

정확히 어떤 객체를 가리키는지 정확하게 알 수 있다.

기억하자 배열을 렌더링하게 될 때는 키를 설정해야 렌더링을 효율적으로 할 수 있다. 그리고 고유값이 없는 경우에는 key 자리에 index를 넣을 수는 있지만 비효율적이다. 다만 데이터가 몇 개 없는 경우와 자주 업데이트되지 않는

경우라면 index를 사용한다고 해서 문제가 되지는 않는다. 자주 업데이트가 되는데 index를 사용하게 되면 매우

비효율적으로 업데이트를 수행하게 된다.