Input Validation 에러처리(시도해본 코드와 해결책)

일단 onChange Handler에 if 문으로 input의 value의 length가 0일때
동적으로 jsx에 상태가 프린트되도록 써보았다.

  const [inputerror, setInputError] = useState("hi");
  
  const handleChange = (event) => {
    const { name, value } = event.target;

    if (name === "file") {
      const files = event.target.files;
      const fileUrl = Array.from(files).map((file) =>
        URL.createObjectURL(file)
      );

      setTodo((todo) => ({ ...todo, [name]: fileUrl }));
    } else {
      setTodo((todo) => {
        return { ...todo, [name]: value };
      });
    }

    if (
      name === "title" ||
      name === "date" ||
      name === "category" ||
      name === "todo"
    ) {
      if (value.length === 0) {
        setInputError("please fill in the blank");
      } else {
        setInputError("hi");
      }
    }
  };

JSX문인데 처음에는

{inputerror && <p>{inputerror}</p>}

이걸 form의 앞에 써주었기 때문에 에러문구로도 변하지 않았다.
랜더링이 일어나기 전이라서 인식되지 않았던것 같다.
form의 뒤에 써주자 상태가 한번만 바뀌고
그 다음부터는 상태 업데이트가 안되었는지
작동되지 않았다. 그래서 일단 터미널이랑 브라우저 창을 껏다가 다시 키고
새로고침을 하고 일단 title의 value가
없을 때 titled is required라는 문구가 나오게 했다.
문제는 title에 한번이라도 뭔가를 입력하고 지워야지만
유효성 검사가 되고 사용자가 키보드로 무언가를 입력하지 않고 그냥 넘어가면
아무런 유효성 문구도 나오지 않는다.
생각해보다가 일단 몇자이상 몇자 이하 문구를 나오게 하고
전체 유효성을 submit했을 때 검사하는 것으로 하는것으로 하는 것이 유용해보여서
그렇게 하기로 했다. 지금은 그게 해결책1번이고 2번 해결책은
react hook을 사용하는것이 2번 해결책이다.

const AddTask = ({ addList }) => {
  const [todo, setTodo] = useState({
    id: uuidv4(),
    title: "",
    date: "",
    file: [],
    category: "",
    todo: "",
  });

  const [inputerror, setInputError] = useState("hi");

  const handleChange = (event) => {
    const { name, value } = event.target;

    if (name === "file") {
      const files = event.target.files;
      const fileUrl = Array.from(files).map((file) =>
        URL.createObjectURL(file)
      );

      setTodo((prevTodo) => ({ ...prevTodo, [name]: fileUrl }));
    } else {
      setTodo((prevTodo) => ({ ...prevTodo, [name]: value }));
    }

    if (name === "title") {
      if (!value) {
        setInputError("title is required");
      } else {
        setInputError("hi");
      }
    }
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    if (Object.values(todo)?.some((value) => !value)) {
      window.alert("모든값을 입력하세요");
      return;
    }
    addList(todo);
    setTodo({
      id: uuidv4(),
      title: "",
      date: "",
      file: [],
      category: "",
      todo: "",
    });
  };

  console.log(todo);
  console.log(inputerror);

  return (
    <>
      <TaskWrapper id="addTodoSection">
        <TitleLayer>
          <h2>ADD TASK</h2>
          <hr></hr>
          <p>Seoul, South Korea</p>
        </TitleLayer>
        <FormLayer>
          <form onSubmit={handleSubmit} className="form">
            <input
              type="text"
              placeholder="Title"
              name="title"
              value={todo?.title}
              onChange={handleChange}
            />
            {inputerror && <p>{inputerror}</p>}