영화 웹 서비스 만들기 - 리액트 연습(할 일)

import { useState } from "react";

function App() {
  const [toDo, setToDo] = useState("");
  const [toDos, setToDos] = useState([]); // toDos는 배열!
  const onChange = (event) => setToDo(event.target.value);
  const onSubmit = (event) => {
    event.preventDefault();
    if (toDo === "") {
      return;
      // toDo가 빈칸이면 함수작동 XX
    }
    setToDos((currentArray) => [toDo, ...currentArray]);
    setToDo("");
  };
  console.log(toDos);
  return (
    <div>
      <h1>내 할 일 ({toDos.length})</h1>
      <form onSubmit={onSubmit}>
        {/* form은 submit기능을 가지고 있다!! preventDefault()로 새로고침 되지 않도록!! */}
        <input
          onChange={onChange}
          value={toDo}
          type="text"
          placeholder="할 일 적으세여"
        />
        <button>할 일 추가</button>
      </form>
      <hr />
      <ul>
        {toDos.map((i, idx) => (
          // map의 두번째 인자는 index이다!
          <li key={idx}>{i}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

뜻하지 않게 리액트 복습을 하였다. 근데 나는 이런게 맞는듯. 뭔가 조각하듯이 전에 배웠던 거 다시 복습하면서 익히고 조금 응용, 그 응용한 거 또 익히고 거기서 또 조금 응용. 앞에 useState랑 props랑 다시 복습중,, 그냥 넘어가서 바로 플젝해도 될 텐데 뭔가 성격상 완벽주의? 플젝만드는 강의에 포함돼 있으니까 다 듣는중이다.

TIL & 복습

const onSubmit = (event) => {
    event.preventDefault(); 
  // form은 submit기능을 가지고 있고 submit되면 새로고침되니 preventDefault();로 막기


setToDos((currentArray) => [toDo, ...currentArray]);
//set~ 함수에서 안에 인자로 들어가는 것(current)은 현재 나타내지고 있는 값이다.


{toDos.map((i, idx) => (
          // map의 두번째 인자는 index이다!
          <li key={idx}>{i}</li>
	))};


if (toDo === "") {
      return;
      // toDo가 빈칸이면 함수작동 XX
    }
// 함수 안에서 그냥 return만 있다면 그 함수를 끝내겠다는 뜻!