[React] map을 이용한 배열 렌더링하기

배열 렌더링 하기

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 }) {   // User컴포넌트 생성 
  return (
    <div>
      <b>{user.username}</b> <span>({user.email})</span>
    </div>
  );
}

function UserList() {     // 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함수를 이용해서 동적인 배열 렌더링

• map() 함수는 배열안에 있는 각 원소를 변환하여 새로운 배열을 만들어 준다.
• 리액트에서 배열을 렌더링 할 때에는 key 라는 props를 설정해야 한다.
• arr.map(i => ) 의 형태로 하위 컴포넌트에게 값을 전달해준다.

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

export default UserList;

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

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

• 배열 렌더링시 key값 설정하지 않으면 기본적으로 배열의 index값을 key로 사용하게 되고, 콘솔창에 경고 메세지가 뜨게 된다.

map()에서 key값을 사용하는 이유

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

array.map(item => <div>{item}</div>); // 해당 배열을 렌더링 하는 코드

위와 같은 배열이 있다고 할 때, b와c 사이에 z를 삽입하게 될 때, 리렌더링 하면서 <div>b</div>
와 <div>c</div>사이에 새 div 태그를 삽입을 하게 되는 것이 아니라, 기존의 c 가 z 로바뀌고, d 는 c 로 바뀌고, 맨 마지막에 d 가 새로 삽입

하위의 요소들이 싹 다 바뀌면서 렌더링이 되기때문에 비효율적이다.

[
  {
    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값을 지정시, 비효율적으로 업데이트 하는것이 아니라, 기존의 값을 그대로 두고 원하는 곳에 내용을 삽입 혹은 삭제를 한다.

---

정리

• arr.map(i => ) 의 형태로 하위 컴포넌트에게 값을 전달해준다.
• Map에 key 값이없다면 중간의 값이 바뀌었을때 그 하위 값들이 전부 변하기 때문이다. key값을 사용한다면 key를 이용해 중간의 값을 추가하게 된다.

---

참고

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