React :: 배열 렌더링

📝 배열 렌더링

💬 컴포넌트로 렌더링

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

💬 컴포넌트를 재사용 할 수 있도록 변경 (한 파일에 여러 개의 컴포넌트 선언 O)

// UserList.js

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

💬 동적인 배열 렌더링: map() 사용

- 일반 데이터 배열을 리액트 엘리먼트로 이루어진 배열로 변환

- 리액트에서 배열을 렌더링 할 시, key (각 원소들마다 가지고 있는 고유 값으로 설정) 라는 props 를 설정 : 각 고유 원소에 key 가 있어야만 배열이 업데이트 될 때 효율적으로 렌더링 될 수 있기 때문

// UserList.js

  ...
  
   return (
    <div>
      {users.map(user => (
        <User user={user} />  // error 
        <User user={user} key={user.id} />  // 고유 값 id를 key로 설정      
      ))}
    </div>
  );
}
  

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

...

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

💡 key 의 존재유무에 따른 업데이트 방식

💬 key 사용 없는 배열 렌더링

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

array.map(item => <div>{item}</div>);  // 렌더링 

위 배열의 b 와 c 사이에 z 삽입 시, 리렌더링을 하게 될 때 b와 c사이에 새 div 태그를 삽입을 하게 되는 것이 아니라, 기존의 c가 z로, d는 c로 바뀌고, 마지막에 d가 새로 삽입되는 방식

a 제거 시에는 기존의 a가 b로, b 는 z로, z는 c로, c는 d로 바뀌고, 맨 마지막에 있는 d가 제거되게 된다.

💬 key 사용하는 배열 렌더링

[
  {
    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>);
// id를 key 값으로 사용

수정되지 않는 기존의 값은 그대로 두고 원하는 곳에 내용을 삽입하거나 삭제

💬 배열을 렌더링 할 때에는 고유한 key 값이 있는것이 중요