React & Typescript로 todolist만들기 - addTodo

import { useRef } from "react";
import classes from "./NewTodo.module.css";

const NewTodo: React.FC<{ onAddTodo: (text: string) => void }> = (props) => {
  const todoInputRef = useRef<HTMLInputElement>(null);
  // useRef가 무엇과 연결되는지 알려줘야 한다 → HTMLInputElement
  // 초기값은 없으므로 null로 지정

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    const enteredText = todoInputRef.current!.value;
    // handleSubmit함수는 form이 제출될때만 실행된다
    // form이 제출되는 것은 ref={todoInputRef}가 연결된 다음이다
    // todoInputRef.current의 초기값을 null로 지정했으므로 error발생
    // 따라서 값이 있으면 value를 가져와라 라는 명령을 위해 ?.사용
    // 빈값(null)이 아니라고 확신할수있는 경우에는 !.사용(=확실히 연결이 완료된 경우)
    /* 정리 : null일 수도 있는 값을 다룰 때 → ?. */
    /* 정리 : 절대 null일리가 없는 실제값을 가져올 때 → !. */

    if (enteredText.trim().length === 0) {
      return;
    }
    props.onAddTodo(enteredText);
  };
  return (
    <form onClick={handleSubmit} className={classes.form}>
      <label htmlFor="text" className={classes.label}>
        Todo Text
      </label>
      <input
        type="text"
        id="text"
        ref={todoInputRef}
        className={classes.input}
      />
      <button className={classes.button}>Add Todo</button>
    </form>
  );
};

export default NewTodo;

내일 할 일

• submit후 input창 텍스트 초기화 시키기
• input창 클릭시 남아있던 기존 텍스트가 제출되는 이슈 해결하기
• 삭제기능 구현