map / filter 연습 2

1 ) 하드코딩

import React from "react";
import "./App.css";

  const App = () => {

    const users = [
      { id: 1, age: 30, name: "송중기" },
      { id: 2, age: 24, name: "송강" },
      { id: 3, age: 21, name: "김유정" },
      { id: 4, age: 29, name: "구교환" },
    ];

    return (
      <div className="app-style">
        <div className="component-style">{users[0].age} - {users[0].name}</div>
        <div className="component-style">{users[1].age} - {users[1].name}</div>
        <div className="component-style">{users[2].age} - {users[2].name}</div>
        <div className="component-style">{users[3].age} - {users[3].name}</div>
      </div>
    );
  };

export default App;

 

👇

 

위에 하드코딩방식으로 짯던걸 map함수를 이용해서 이렇게 간단하게  코드를 짤 수 있다 !

 

2 ) map 함수 사용

 const App = () => {

    const users = [
      { id: 1, age: 30, name: "송중기" },
      { id: 2, age: 24, name: "송강" },
      { id: 3, age: 21, name: "김유정" },
      { id: 4, age: 29, name: "구교환" },
    ];

    return (
      <div className="app-style">
        {
          users.map(function(item){
            return (
              <div className="component-style">{item.age} - {item.name}</div>
            )
          })
        }

      </div>
    );
  };

 

4줄이나 됬던 코드들이 map 함수를 사용함으로서 1줄로 줄어들었다,..

map 함수는 정말 유용한 것 같아서 꼭 익숙해지고 친해져야 될 함수같아 !!!!!

 

출력결과 :