배열 랜더링하기

• map을 이용한 랜더링 : arr.map(i =>)의 형태로 하위 컴포넌트에게 값으로 전달한다.

• 리액트에서 배열을 랜더링 할 때에는 key 라는 props를 설정(고유값)

• map에서 key가 필요한 이유 : map에 key값이 없다면 중간의 값이 바뀌었을 때 그 하위 값들이 전부 변하기 때문이다. key를 이용해 중간의 값을 추가하게 된다.

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: 'jini',
            email: 'genie9105@gamail.com'
        },
        {
            id: 2,
            username: 'biki',
            email: 'biki@gmail.com'
        },
        {
            id: 3,
            username: 'nado',
            email: 'nado@gmail.com'
        }
    ];
    return (
        <div>
            {
                users.map(
                    user => (<User user={user} key={user.id} />)
                )    
            }
        </div>
    )
}

export default UserList;

비효율적인 방법

import React from "react";

function UserList(){
    const users = [
        {
            id: 1,
            username: 'jini',
            email: 'genie9105@gmail.com'
        },
        {
            id: 2,
            username: 'tester',
            email: 'abc@naver.com',
        },
        {
            id: 3,
            username: 'nana',
            email: 'dkdk@naver.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;

App.js

import React, { useRef, useState } from "react";
import UserList from "./UserList";

function App() {
  return (
		<UserList />
	)
}

export default App;

---

이 글은 패스트캠퍼스 '프론트엔드(React)올인원패키지Online'을 수강하며 정리한 노트입니다.
https://fastcampus.co.kr/search?keyword=%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C