React- 배열 렌더링 하기

※ 강의를 듣고 제가 이해한 것을 바탕으로 정리한 것이라서 오류가 있을 수 있습니다.

 

 

배열 렌더링 하기

 

1) 기본적인 방법

const users = [
  {
    id: 1,
    username: 'programexplorer',
    email: 'programexplorer@naver.com'
  },
  {
    id: 2,
    username: 'tester',
    email: 'tester@gmail.com'
  },
  {
    id: 3,
    username: 'liz',
    email: 'liz@daum.net'
  }
];

이런 배열이 있다고 가정할 때 이것을 렌더링 하는 가장 기본적인 방법은 비효율적이지만

그냥 그대로 코드를 작성하는 것이다.

 

UserList.js (파일명)

import React from 'react';

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

export default UserList;

이 코드는 사용되는 코드를 일일히 넣는게 별로 좋지 않으니 컴포넌트를 재사용 할 수 있도록 아래에 새로 만들어주겠다.

 

 

2) 컴포넌트를 하나 더 만들어서 하는 방법

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: 'programexplorer',
      email: 'programexplorer@naver.com'
    },
    {
      id: 2,
      username: 'tester',
      email: 'tester@gmail.com'
    },
    {
      id: 3,
      username: 'liz',
      email: 'liz@daum.net'
    }
  ];

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

export default UserList;

하지만 이 코드 또한 문제가 있는데 배열이 고정적이라면 상관없겟지만 배열의 인덱스를 하나하나 조회해가면서 렌더링하는 방법은 동적인 배열을 렌더링하지 못하는 문제가 있다.

 

그래서 동적인 배열을 렌더링 해야할 때는 배열의 내장함수인 map()을 사용해야하는데

map() 함수는 배열안에 있는 각 원소를 변환하여 새로운 배열을 만들어 준다.

리액트에서 동적인 배열을 렌더링해야 할 때는 이 함수를 사용하여 일반 데이터 배열을 리액트 엘리먼트로 이루어진 배열로 변환해주면 된다.

3) 동적인 배열을 렌더링 하기 위한 내장함수 map() 사용

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: 'programexplorer',
      email: 'programexplorer@naver.com'
    },
    {
      id: 2,
      username: 'tester',
      email: 'tester@gmail.com'
    },
    {
      id: 3,
      username: 'liz',
      email: 'liz@daum.net'
    }
  ];

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

export default UserList;

그리고 리액트에서 배열을 렌더링 할 때에는 key 라는 props 를 설정해야 하는데 key 값은 각 원소들마다 가지고 있는 고유값으로 설정을 해야한다. 지금의 경우엔 id 가 고유 값이므로 id 값으로 설정하면 된다.

 

실행 결과