useRef를 사용한 에러표시와 오류해결(미해결은 파일부분)

목표: input을 입력하지 않으면 useRef를 사용하여 빈 input을 가르키게 해주고
오류메세지를 띄워준다.

작성코드와 개선:

 const handleSubmit = (event) => {
    event.preventDefault();

    if (todo.title.trim().length === 0) {
      setError((prevError) => ({
        ...prevError,
        titleError: "please fill in the title",
      }));
      inputTitle.current.focus();
      return;
    }

    addList(todo);

    setTodo({
      id: uuidv4(),
      title: "",
      date: "",
      file: [],
      category: "",
      todo: "",
    });
  };

위의 코드에서는 title이 채워져도 에러메세지가 사라지지 않고 있기 때문에
처음에는 if문 뒤에 else if문을 추가하여 title.trim.length()>3글자 이상이면
문구가 없어지도록 하였다. 그랬더니 Too many rendering 런타임 오류가 나게되었다.
확실하진 않지만 Too many rendering 오류는 useEffect에 의존성을 추가하여
대부분 해결 할 수 있는 것 같다. handleSumbit함수의 호출이 끝나고

useEffect(() => {
  if (error.titleError && todo.title.trim().length >= 3) {
    setError((prevError) => ({
      ...prevError,
      titleError: "",
    }));
  }
}, [error.titleError, todo.title]);

의 코드를 추가해주는데 유의한 점은 의존성에 error 말고 todo.title역시 추가해줘야 한다.