[JavaScript] map 함수

리액트를 사용하고 공부하다보니 자바스크립트 문법에 대해 부족한 점을 많이 느껴 자세히 공부하기로 마음먹었다.

자바스크립트 문법을 보다 정확하게 알고있어야 리액트를 하는데도 온전히 내것으로 만들 수 있는 것 같다.

그렇게 코드에서 내가 자주 사용했던 함수들 위주로 작성해보려고한다.

오늘은 map함수에 대해서 알아보려고 한다.

이 글은 MDN 과 제로초님의 블로그를 참고해서 작성하였습니다.

 

---

map 함수

배열.map((요소, 인덱스, 배열) => { return 요소 });

arr.map(callback(currentValue[, index[, array]])[, thisArg])

map함수는 위와같은 구문을 가지고 있다.

두가지 구문표현방법은 나는 아래의 표현보다는 위의 표현이 더 와닿았던 것 같다.

배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환해준다.

 

간단한 예제부터 먼저 봐보자

const array1 = [1, 4, 9, 16];

const map1 = array1.map(x => x * 2);

console.log(map1);
//출력 : Array [2, 8, 18, 32]

보면 map1에 새로운 배열이 반환되는게 보이죠?

map은 callback 함수를 각각의 요소에 대해 한번씩 순서대로 불러서 조건에 맞는 새로운 배열을 만들어 반환한다.

callback 함수는 호출될 때 대상 요소의 값, 그 요소의 인덱스, 그리고 map을 호출한 원본 배열 3개의 인수를 전달받는다.

 

일단 이정도되면 뭔가 대충 이해가 된 것 같으니까 📖리액트를 다루는 기술📖책에서 map함수를 굉장히 많이 사용하는데 그 중의 예제 하나를 가져와서 적용해보도록 하겠다.

 

---

📖리액트를 다루는 기술📖책에서의 10장 예제였던 투두리스트 만들기에서 map함수를 사용한 부분을 가져와봤다.

import React, { useState, useRef, useCallback, useEffect } from 'react';
import TodoTemplate from './TodoTemplate';
import TodoInsert from './TodoInsert';
import TodoList from './TodoList';

const App = () => {
  const [todos, setTodos] = useState
    ([
      {
        id: 1,
        text: '리액트 투두리스트 만들기',
        checked: true,
      },
      {
        id: 2,
        text: '토플 오답노트',
        checked: false,
      },
      {
        id: 3,
        text: '블로그 포스팅',
        checked: true,
      },
    ])

  //고유값으로 사용될 id
  // ref를 사용하여 변수 담기
  const nextId = useRef(3);

  const onInsert = useCallback(
    text => {
      const todo = {
        id: nextId.current,
        text,
        checked: false,
      };
      setTodos(todos => todos.concat(todo));
      nextId.current += 1; //nextId 1씩 더하기
    },
    [todos],
  );

  const onRemove = useCallback(
    id => {
      setTodos(todos => todos.filter(todo => todo.id !== id));
    },
    [todos]
  )

  const onToggle = useCallback(
    id => {
      setTodos(todos =>
        todos.map(todo =>
          todo.id === id ? { ...todo, checked: !todo.checked } : todo,
        ),
      )
    },
    [todos],
  )

  useEffect(() => {
    var num = 0
    for (var i = 0; i < todos.length; i++) {
      if (todos[i].checked === true) {
        num += 1
        if (num === todos.length) {
          alert("축하합니다.");
        }
      }
    }
  }
    , [todos]);

  return (
    <TodoTemplate>
      <TodoInsert onInsert={onInsert} />
      <TodoList todos={todos} onRemove={onRemove} onToggle={onToggle} />
    </TodoTemplate>
  );
};

export default App;

 

코드의 하단에 보면 onToggle 컴포넌트에 map함수가 쓰인 것을 볼 수 있다.

그 부분만 잘라내서 보면

const onToggle = useCallback(
    id => {
      setTodos(todos =>
        todos.map(todo =>
          todo.id === id ? { ...todo, checked: !todo.checked } : todo,
        ),
      )
    },
    [todos],
  )

전체코드에서 위에 todos라는 배열을 설정해준것을 기억하고있다면, 

todos.map( todo => todo.id === id ? {...todo, checked : !todo.checked } : todo )

이 코드가 배열 todos의 요소인 todo를 차례로 하나씩 꺼내면서 삼항 연산자에 넣어보는것이다.

그 요소의 id가 지정된 id와 동일하다면 체크표시를 하도록 만든 코드이다.

 

이해가 되는가?

 

나는 이제서야 이게 정확히 이런뜻이구나라고 깨달으면서 가려웠던 부분이 긁히는 느낌이다.

다들 자바스크립트를 알고 리액트를 공부하면 좋을 것 같단 생각이 든다.

거꾸로 하게 되면 러닝커브가 너무 가파른 것 같지만 알아가는 재미가 아주 쏠쏠하다.