TIL 8주 5일차

map()이 뭐지?

• JavaScript의 표준 내장 객체이다.
• map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.

참고 : MDN

const arr = [1, 2, 3, 4, 5] 라는 배열이 있다.

배열 안에 있는 모든 요소를 제곱하여 새로운 배열을 만들고 싶다면 어떻게 해야 할까?

바로 map() 메서드를 사용하면 된다.

const arr = [1, 2, 3, 4, 5];

const mapArr = arr.map(num => num * num);

console.log(arr);
// > Array [1, 2, 3, 4, 5]

console.log(mapArr);
// > Array [1, 4, 9, 16, 25]

map() 메서드 안에 들어가는 내용은 callback함수이다.

배열 arr에 있는 요소(num)들에 함수를 실행하고 나온 값(num * num)을 저장하여 새로운 배열(mapArr)로 만든다.

map() 활용하기

배열의 요소들을 화면에 그리도록 map() 을 활용해 볼 것이다.

• App.js

import "./App.css";
import Test01 from "./07/Test01";

function App() {
  return (
    <div className='App'>
      <Test01 />
    </div>
  );
}

export default App;

• Test01 함수 컴포넌트

import React from "react";

export default function Test01() {
  const todoList = [
    { taskName: "방 청소", finished: false },
    { taskName: "화장실 청소", finished: true },
  ];

  // map() 함수
  const todos = todoList.map((todo) => <div>{todo.taskName}</div>);
  return (
    <>
      <label>TO DO</label>
      {todos}
    </>
  );
}

| 실행화면