react 기본 - 10.배열 렌더링

배열 렌더링

동적인 배열을 렌더링해야 할때에는 자바스크립트 배열의 내장함수 map()을 사용합니다.
map() 함수는 배열안에 있는 각 원소를 변환하여 새로운 배열을 만들어주며, 일반 데이터 배열을 리액트 엘리먼트로 이루어진 배열로 변환해주면 됩니다. 

리액트 에서는 map을 사용하여 렌더링 할 경우 key가 필요하며, 수정되지 않는 기존의 값을 그대로 두고 원하는 곳에 내용을 삽입하거나 삭제하기 때문에 효과적으로 렌더링을 할 수 있습니다.

UserList.js

import React from 'react';

// 데이터에 key가 있을 경우
const UserKey = ({user}) => {
    return (
        <>
            <b>key가 있을 경우</b><p>{user.username} "{user.email}" <br /></p>
        </>
    )
}
const UserKeyList = () => {
    const users = [
        {
            id: 1,
            username: 'a',
            email : 'aaa@gmail.com'
        },
        {
            id: 2,
            username: 'b',
            email : 'bbb@gmail.com'
        },
        {
            id: 3,
            username: 'c',
            email : 'ccc@gmail.com'
        }
    ]
    return (
        <>
        // 데이터 고유 값 id === key
            {users.map(user => (
                <UserKey user={user} key={user.id}/>
            ))}
        </>
    )
}

// 데이터에 key가 없을 경우
const User = ({user}) => {
    return(
        <>
            <b>key가 없을 경우</b><p>{user.username} "{user.email}" <br /></p>
        </>
    )
}

const UserList = () => {
    const users = [
        {
            username: 'a',
            email : 'aaa@gmail.com'
        },
        {
            username: 'b',
            email : 'bbb@gmail.com'
        },
        {
            username: 'c',
            email : 'ccc@gmail.com'
        }
    ]
    return (
        <>
        // 데이터에 고유한 값이 없다면, 콜백함수의 두번째 파라미터 index를 key로 사용
            {users.map((user, index) => (
                <User user={user} key={index} />
            ))}
        </>
    )
}

function Main() {
    return (
        <>
            <UserList />
            <UserKeyList />
        </>
    )
}
export default Main;

App.js

import React from 'react';
import Inner from "./Inner";
import UserList from "./UserList";

function App() {
  return (
      <React.Fragment>
          <Inner>
              <UserList/>
          </Inner>
      </React.Fragment>
  );
}

export default App;