배열 렌더링하기

배열 렌더링하기

 

● 배열

const users = [
    {
      id : 1, 
      username : 'silver',
      email: 'public.les0498@gmail.com'
    },
    {
      id : 2, 
      username : 'tester',
      email: 'public.tester@example.com'
    },
    {
      id : 3, 
      username : 'gold',
      email: 'public.gold@example.com'
    },

  ];

 

이 내용을 컴포넌트로 렌더링한다면 아래와 같은 코드로 나타낼 수 있다. 

 

 

● UserList.js

import React from 'react';

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

 

하지만, 재사용되는 코드를 일일히 넣지 않는게 좋으니 컴포넌트를 재사용할 수 있도록 새로 만들어준다. 

 

 

(new !!1) 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 : 'silver',
      email: 'public.les0498@gmail.com'
    },
    {
      id : 2, 
      username : 'tester',
      email: 'public.tester@example.com'
    },
    {
      id : 3, 
      username : 'gold',
      email: 'public.gold@example.com'
    },

  ];

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

}

export default UserList;

 

 

컴포넌트를 App에서 렌더링 해주면 

 

 

지금의 코드는 배열이 고정적이라면 상관 없겠지만,

배열의 인덱스를 하나하나 조회해가면서 렌더링하는 방법인 동적인 배열을 렌더링하지 못한다. 

 

---

● map() 함수

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

 

(new !!2) 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 : 'silver',
      email: 'public.les0498@gmail.com'
    },
    {
      id : 2, 
      username : 'tester',
      email: 'tester@example.com'
    },
    {
      id : 3, 
      username : 'gold',
      email: 'gold@example.com'
    },

  ];

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

}

export default UserList;

 

이렇게 하면 배열의 모든 원소가 렌더링 되지만 브라우저에서 콘솔을 열어보면 에러가 뜨는 것을 볼 수 있다. 

 

 

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

key 값은 각 원소들마다 가지고 있는 고유 값으로 설정해야한다. 

지금의 경우는 id가 고유 값이라 할 수 있다. 

 

 

(new !!3) 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 : 'silver',
      email: 'public.les0498@gmail.com'
    },
    {
      id : 2, 
      username : 'tester',
      email: 'tester@example.com'
    },
    {
      id : 3, 
      username : 'gold',
      email: 'gold@example.com'
    },

  ];

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

}

export default UserList;

 

 

---

 

● index를 key로 사용하기

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

 

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

 

---

🔑 핵심 포인트 

Map 을 이용한 렌더링 

- arr.map(i => ) 의 형태로 하위 컴포넌트에게 값을 전달해준다.

 

Map에서 Key가 필요한 이유 

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

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