카테고리 없음

[ReactJS] To Do List - 배열의 요소 가져오기- with .map

mswait 2022. 3. 10. 23:29

<hr> horizontal rule

 

reactJS를 잘하는 개발자라는 건 JavaScript을 진짜 잘하는 개발자라는 의미이다.

 

.map 은 배열에 함수를 넣게 해준다. 그리고 그 함수는 배열의 모든 요소에 적용되게끔 해준다. 그리고 .map() 에서 return 무엇이던 간에 새로운 배열의 요소로 들어가게 된다.

 

모든 요소에 대해 실행된다.(그렇기에 요소의 개수만큼 반복될 것이다)

그리고 어떠한 값이건 간에 그 함수에서 return 해준 값이 배열의 요소로 들어가게 될 것이다.

map 은 하나의 arrary 안에 있는 item,element를 내가 원하는 무엇이든 간에 것으로 바꿔주는 역할을 하기 때문이다. 그리고 새로운 array를 리턴해주기 때문이다. 

 

함수가 배열의 각 원소를 한번씩 거쳐가면서 실행될 것이다.

 

 

 

import { useState, useEffect } from "react";

function App() {
  const [toDo, setToDo] = useState("");
  const [toDos, setToDos] = useState([]);

  const onChange = (event) => {
    return setToDo(event.target.value);
  };
  const onSubmit = (event) => {
    event.preventDefault();

    if (toDo === "") {
      return;
    }
    setToDos((currentArray) => [toDo, ...currentArray]);
    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((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

37줄 만에 to - do list를 작성할 수 있었다. Vanilla JavaScript 였다면 html, js 파일을 따로 하여야 했을텐데

React 에서는 한곳에서 다 작성할 수 있었다.