React 복습 - 배열 렌더링 하기

https://react.vlpt.us/basic/11-render-array.html

11. 배열 렌더링하기 · GitBook

 

 

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

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

export default UserList;

 

 

함수 하나 만들어서 map으로 돌리면서 값 넣어서 리턴하기

 

많이 해봤지만... function으로 바꿔서 하니까 낯설다..!