• 실습일자 : 2024.04.23

코드

import { useState } from "react";

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

  const onChange = (e) => {
    setToDo(e.target.value);
    console.log(e);
  };
  const onSubmit = (e) => {
    e.preventDefault();
    if (toDo === "") {
      return;
    }
    setToDos((nowToDoArray) => [toDo, ...nowToDoArray]);
    setToDo("");
  };
  console.log(toDos);

  return (
    <div>
      <h1>My To Dos ({toDos.length})</h1>
      <form onSubmit={onSubmit}>
        <input
          type="text"
          value={toDo}
          onChange={onChange}
          placeholder="Input Your TO Do List"
        />
        <button>Add To Do</button>
      </form>

      <ul>
        {toDos.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

• map(item, index)
  • item = 값
  • index = 순서
  • toDos 배열에 들어가 있는 순서를 index, 각 순서에 맞게 들어가 있는 값이 item에 해당!
• HTML - li tag
  • HTML
  • 요소는 목록의 항목을 나타냅니다.
  • 반드시 정렬 목록(
    ), 비정렬 목록(
    , 혹은 메뉴() 안에 위치해야 합니다.

  결과

  

  느낀점

  코딩테스트에서나 사용하던 map() 함수를 직접 사이드 프로젝트에서 사용해봐서 새삼 놀랐다.

  물론, 실무에서는 자주 사용하겠지만 나는 python이나 java 위주로 코딩테스트 준비를 했기 때문에 javascript에서는 수업 외에 처음으로 map()을 사용해봤다.

  그런 면에서, map() 메서드를 사용한 부분이 개인적으로 나름의 어떤 의미를 주었다.

  참고

  • [HTML & javascript - array 형태의 데이터를 li에 넣어서 list화 하기]
    • https://sosoo1sosoo.tistory.com/158
  • [HTML - li tag]
    • https://developer.mozilla.org/ko/docs/Web/HTML/Element/li
  • [javascript - map() 함수]
    • Map 객체와 map() 함수는 아예 다른 것에 유의할 것!
    • https://mjn5027.tistory.com/80