useRef를 하나의 배열로 만들어서 관리

const inputRef = useRef([]);

빈 배열 생성 . 안의 내용은 배열을 순회하면서 모든 입력 필드에 접근할 수 있도록
ref props에서 저장하도록 해줄 것이다.
여기에서 중요한 것인 ref의 속성 값으로 콜백함수를 전달해야 한다.
ref에 함수를 전달하면 해당 함수는 컴포넌트가 마운트되거나 업데이트될 때 호출된다. 이 콜백함수가 받는 매개변수는 바로 Dom 요소이다.

ref={(el) => (inputRef.current[idx] = el)}

예를 들면 el을 매개변수로 써주었는데 이 것은 Dom요소를 가르킨다.
그 Dom요소를 inputRef에 배열로 차례 차례 저장해주는 것이다.
'el'을 통해 해당 DOM 요소의 값을 읽거나 조작할 수 있다.
처음에 나는 콜백함수가 아닌 아래와 같이 직접 참조를 사용해서
되지가 않았다. 이렇게 하면 초기화된 시점한번만 작동되서
배열이 동적으로 갱신되지가 않는다고 한다.

ref={inputRef.current[idx]}

그리고 이제 form이 submit 되기 전에 유효성을 검사하는 것이니깐
handleSubmit에 반복문을 써준다. 배열의 길이만큼 돌면서
값이 채워져있는지 검사하고 채워져 있지 않다면 어떤 동작을 해주고 싶은지
쓰면 된다.

예시)

 event.preventDefault();
    console.log("Refs:", inputRef.current);

    for (let i = 0; i < inputRef.current.length; i++) {
      console.log("Field:", inputRef.current[i]);
      const field = inputRef.current[i];
      if (field.value === "") {
        alert(field.name + "는(은) 필수 입력사항입니다.");
        field.focus();
        return;
      }
      if (field.tagName.toLowerCase() === "select") {
        if (field.value === "category") {
          alert(field.name + "는(은) 필수 입력사항입니다.");
          field.focus();
          return;
        }
      }
    }

    addList({ ...todo, file: file });
    console.log("전송된 파일은 이것입니다.", file);
    console.log("전송된 todo는 이것입니다.", todo);

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

    setFile([]);
  };