[React] Day 14 - 배열 렌더링하기

추가내용

UserList.js 추가

 => 현재 방법은 가장 기본적인 방법으로 가장 비효율적인 방법이다.

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;

 

➡️배열안에 있는 각 원소를 변환하여 새로운 배열 만들어주기

 배열이 고정적이라면 상관이 없지만, 배열의 인덱스를 하나하나 조회해가면서 렌더링하는 방법은 결코 효율적이지 않다. 따라서 배열에 있는 각 원소를 변환하여 새로운 배열을 만들어서 자동적으로 데이터를 원하는대로 출력해주도록 하겠다.

 

📌 map() 함수

 

기존함수명.map(추가할 함수명)

ex) array.map(square)

 

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: 'dndhk',

      email: 'dndhk@gmail.com'

    },

    {

      id: 2,

      username: 'Lee',

      email: 'Lee@example.com'

    },

    {

      id: 3,

      username: 'dada',

      email: 'dada@example.com'

    }

  ];

  return (

    <div>

      {users.map(user => (

        <User user={user} key={user.id}></User>

      ))}

    </div>

  );

}

export default UserList;

결과사진

 

📢이렇게 배열에 있는 값만 변경시켜주어도 결과창에는 출력값이 바뀌는 것을 확인할 수 있다.

 

📌배열을 렌더링 할 때에는 key 라는 props 를 설정해야한다. key 값은 각 원소들마다 가지고 있는 고유값으로 설정을 해야한다. 지금의 경우엔 id 가 고유 값이다.

 

❓그렇다면 왜 key값을 꼭 사용해주어야 할까?

key 값을 사용하지 않고 리렌더링을 하게 된다면 복잡한 렌더링을 보여준다.

이런 태그가 있다고 생각해보자. 이 태그에서 e를 b와 c 사이에 추가해준다고 할때, key 값을 사용하지 않은 태그는

e를 c자리에, c를 d 자리에, 맨 마지막에 d를 삽입하는 형식으로 렌더링이 진행된다.

 

하지만 key값을 사용한다면 그냥 b와 c 사이에 e가 삽입되고 끝난다. 이는 많은 데이터를 다룰때 엄청난 성능차이로 나타날 것이다. 따라서 key 값을 무조건 사용해주어야 하는 것이다.