[ReactJS] map() 매서드의 활용

사실 이걸 JS문법이라 해야할지,

React 문법이라 해야할지 애매한 부분이 있긴 하다.

그러나 매우 유용한 매서드이고 처음 만져 본 매서드라서

정리를 한번쯤 하고 넘어가려 한다.

 

아래 코드를 살펴보자

import { useState, useEffect } from "react";

function App() {

  const [toDo, setToDo] = useState("");
  const [toDos, setToDos] = useState([]);
  const onChange = (event) => setToDo(event.target.value);
  const onSubmit = (event) => {
    // stop refreshing
    event.preventDefault();
    // if toDo is empty
    if (toDo === "") {
      // kill the function
      return;
    };
    // currArrray would be argument
    setToDos(currArray => [toDo, ...currArray]);
    // After summiting, make toDo empty
    setToDo("");
  };

  return (
    <div>
      <h1>My To Dos ({toDos.length})</h1>
      <form onSubmit={onSubmit}>
        <input 
        onChange={onChange} 
        value={toDo} 
        type="text" 
        placeholder="Write your to do,,," 
        />
        <button>Add To Do </button>
      </form>
      <hr />
      <ul>
        {toDos.map((curr_todo, index) => (
          <li key={index} >{curr_todo}</li>
        ))}
      </ul>
    </div>
  )
}

export default App;

주목할 점은 return문의 <ul> 태그 안 내용이다.

map() 매서드는 리스트의 모든 원소를 하나씩 돌려준다.

파이썬적으로 해석하자면,

for item in list:

에 가장 가까운 느낌?

 

위의 예시를 해석해 보면

toDos 리스트 내에 있는 모든 curr_todo에 접근 해,

이를 <li>태그 내에 넣어 반환하는 역할을 수행한다.

이를 통해 toDo 리스트를 쉽게 구현할 수 있는 것이다.

vanila JS보다 훨씬 손쉽게 구현이 가능하다.

굳이 설명을 덧붙이자면, argument 로서의 index의 역할인데,

리액트는 toDos 내의 모든 curr_todo를 인식하기 때문에 고유한 식별자가 필요한 것이다. (없어도 프로그램은 돌아간다.)