React - 배열 렌더링

이렇게 나오게 할 때

비효율적인 방법

import React from 'react';

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

- 같은 코드 반복됨

 

효율적인 코드

※ 하나의 컴포넌트 안에 다른 컴포넌트 만들어도 됨

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: 'starters',
      email: 'public.starters@gmail.com'
    },
    {
      id: 2,
      username: 'tester',
      email: 'tester@gmail.com'
    },
    {
      id: 3,
      username: 'jajajojo',
      email: 'jajajojo@gmail.com'
    }
  ];

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

export default UserList;

User라는 컴포넌트 만들고 거기에 props로 users 배열에 대한 데이터 처리

 

내용을 바꾸게 될 때(map 사용)

JSX 부분 수정

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

 

-> 똑같이 화면에 결과 나옴, But) 개발자 도구에 에러 떠있음

=> 고유값을 찾아 key로 설정해 주어야 최적화가 잘 이루어진다.

여기서는 id가 고유값

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

만약 고유값이 없는 경우라면, map에서 사용하는 콜백함수의 두번째 파라미터인 index를 사용(어쩔 수 없는 경우에만))

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

- 이렇게 index를 key값으로 넣으면, 경고만 없어질 뿐 성능적으로 나아진 것은 아님

 

※ key의 역할

Ex)

새로운 값 z 를 넣으면, c 가 z 가 되고, d 가 c 가 되고, 새로운 d가 생긴다.

- 기존의 값을 남기고 z 만 들어와야 함

-> 각 값이 자신의 위치만 알고, 정확히 렌더링할 곳을 모르기 때문

=> 키를 설정하면 이게 가능하게 된다.

 

Javascript 배열 내장함수(map)