배열 렌더링하기

참고

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

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

export default UserList;

이러한 배열을 컴포넌트로 렌더링 하고자 할 때, 배열이 고정적이라면 상관없겠지만, 배열의 인덱스를 하나하나 조회해가면서 렌더링하는 방법은 동적인 배열을 렌더링하지 못한다.

 

동적인 배열 렌더링

동적인 배열을 렌더링해야 할 때에는 자바스크립트 배열의 내장함수 map( ) 을 사용한다.

 

UserList.js

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

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

export default UserList;

이런식으로 map 함수를 사용하면 배열 안에 있는 각 원소를 변환하여 새로운 배열을 만들어주므로, 배열의 모든 원소가 렌더링 된다. 하지만 브라우저에서 콘솔창을 열게 되면 에러가 뜬다.

배열을 렌더링 할 때 key 설정을 하지 않게 된다면 기본적으로 배열의 index 값을 key 로 사용하게 된다. (error)

 

배열의 key 값 설정

🚨 리액트에서 배열을 렌더링 할 때에는 key 라는 props 를 설정해야 한다. (고유값)

key 값은 각 원소들마다 가지고 있는 고유값을 줌으로써 리렌더링 성능을 최적화 할 수 있게 해준다.

위의 코드 배열에서는 고유값이 id 이므로 id 를 key 값으로 줄 수 있다.

 

고유 원소에는 key 가 있어야 배열에 업데이트 될 때 효율적으로 렌더링 된다.

key 값이 어떤 원소를 가리키는지 알고 있기 때문에 수정되지 않는 기존의 값은 그대로 두고 원하는 곳에 내용을 삽입하거나 삭제하기 때문이다.

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

배열 안의 원소가 가지고 있는 고유한 값이 없다면 map( ) 함수를 사용할 때 설정하는 콜백함수의 두번째 파라미터 index 를 key 로 사용하면 된다.

<div>
  {users.map((user, index) => (
    <User user={user} key={index} />
  ))}
</div>

 

Key 가 필요한 이유

Map 에서 key 값이 없다면 중간의 값이 바뀌었을 때 그 하위 값들이 전부 변하기 때문이다.

key 값을 사용한다면 key 를 이용해 중간에 값을 추가하게 된다.

 

key의 존재 유무에 따른 업데이트 방식

const array = ['a', 'b', 'c', 'd'];

array.map(item => <div>{item}</div>);

배열의 b 와 c 사이에 z 를 삽입하게 되면, 리렌더링 하게 될 때 기존의 c 가 z 로 바뀌고, d 는 c 로 바뀌고, 맨 마지막에 d 가 새로 삽입된다. a 를 제거하게 된다면, 기존의 a 가 b 로 바뀌고, b 는 z 로 바뀌고, z 는 c 로 바뀌고, c 는 d 로 바뀌고, 맨 마지막에 있는 d 가 제거된다.

이런식으로 비효율적으로 작업이 이루어진다. 하지만 key 값이 있다면 이 작업은 개선된다.

[
  {
    id: 0,
    text: 'a'
  },
  {
    id: 1,
    text: 'b'
  },
  {
    id: 2,
    text: 'c'
  },
  {
    id: 3,
    text: 'd'
  }
];

array.map(item => <div key={item.id}>{item.text}</div>);

때문에 배열을 렌더링 할 때 고유한 key 값이 있는 것이 중요하며, 만약에 배열 안에 중복되는 key 가 있을 때는 렌더링 시에 오류메시지가 콘솔에 나타나게 되며, 업데이트가 제대로 이루어지지 않게 된다.