refactoring 2

반복적인 코드를 줄이는 refactoring

• 저번엔 기본 배열을 활용했었고 이번엔 객체가 담긴 배열 (object literal)을 활용

• 똑같이 map()메소드를 사용

import React from "react";

const App = () => {
  const bodyStyle = {
    display: "flex",
    gap: "12px",
    padding: "50px",
  };

  const users = [
    {
      id: 1,
      age: 18,
      name: "김원효",
    },
    {
      id: 2,
      age: 28,
      name: "성용홍",
    },
    {
      id: 3,
      age: 32,
      name: "진김수",
    },
    {
      id: 1,
      age: 39,
      name: "효용진",
    },
  ];

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

export default App;

const User = ({ user }) => {
  const squareStyle = {
    width: "100px",
    height: "100px",
    border: "1px solid green",
    borderRadius: "10px",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
  };

  const { age, name } = user;

  return (
    <div style={squareStyle}>
      {age}살 - {name}
    </div>
  );
};