9. 배열을 렌더링 해보기

import React from 'react';

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>
      <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;

 

이렇게 값을 넣어주면 되지만, 위 방법은 비효율적인 방법이다.

컴포넌트를 선언해서 그 컴포넌트를 재사용해가며 값을 채워주면 더 좋을 것이다.

 

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() 이라는 것을 사용하면 된다. → 일반 데이터 배열을 리액트 엘리먼트 <User> 배열로 변환해주면 된다!

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

​

근데 이때! 리액트에서 배열을 렌더링 할 때는 key 라는 props 를 설정해주어야 한다! (안그러면 오류남!)

왜냐하면 각 고유 원소에 key가 있어야만 배열이 업데이트될 때 효율적으로 렌더링 할 수 있기 때문이다.

(key를 통해 각 원소를 특정하여 업데이트하거나 삭제하기 때문에 훨~씬 효율적이다.)

 

(상세 설명은 출처 : https://react.vlpt.us/basic/11-render-array.html)

11. 배열 렌더링하기 · GitBook

 

만약, 배열에 딱히 고유한 값이 없다면 map() 함수를 사용할 때 설정하는 콜백함수의 두 번째 파라미터 index를 key로 사용해주면 된다.

key 를 설정안해주면 기본적으로 배열의 index 값을 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: 'tester',
      email: 'tester@example.com'
    },
    {
      id: 3,
      username: 'liz',
      email: 'liz@example.com'
    }
  ];

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

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

export default UserList;

---

출처 : https://react.vlpt.us/basic/11-render-array.html

11. 배열 렌더링하기 · GitBook