react에서 vaildation 체크를 하고 sweeatalert 모달을 사용해 결과를 보여지게 해보았다!
진행중인 프로젝트기에 일부 코드는 수정 및 생략했다.

🌱 vaildation check!

onChange 함수를 사용하여 target에 값이 바뀔때마다 vaildation check를 하였다. 기본 값은 false로 공백이 아니면 true로 바뀌어 모든 값들이 true가 될 경우에만 데이터가 서버로 전달되도록 하였다.

  const [form, setForm] = useState({
    title: "",
    member: "",
    comment: "",
  });

  const [vaildation, setVaildation] = useState({
    titleVaild: false,
	memberVaild: false,
    commentVaild: false,
  });

  const checkVaildation = ({ value, name }) => {
    if (name === "title") {
      setVaildation({
        ...vaildation,
        titleVaild: value ? true : false,
      });
      
    }
    if (name === "member") {
      setVaildation({
        ...vaildation,
        memberVaild: value ? true : false,
      });
    }
    if (name === "comment") {
      setVaildation({
        ...vaildation,
        commentVaild: value ? true : false,
      });
    }
  };

  const onChange = (e) => {
    const { value, name } = e.target;
    setForm({ ...form, [name]: value });
    checkVaildation({ value, name });
  };

  const add = useCallback(() => {
    if(vaildation.titleVaild 
      && vaildation.memberVaild
      && vaildation.commentVaild){
        swal({
          title: "수정 완료",
          text: "정상적으로 수정되었습니다.",
          icon: "success",
          button: "닫기",
        });
        history.push("/conference");
      }else{
        swal({
          title: "제출 실패",
          text: "모든 칸을 작성했는지 다시 한번 확인하세요.",
          icon: "warning",
          button: "닫기",
        });
      }
  }, []);

모두 true이면 왼쪽, 하나라도 false이면 오른쪽 모달이 뜬다!

➕ 위에 코드를 수정시켰다.

  const [form, setForm] = useState({
    title: "",
    member: "",
    comment: "",
  });

  const [vaildation, setVaildation] = useState({
    title: false,
	member: false,
    comment: false,
  });

  const checkVaildation = () => {
    if(vaildation.title && vaildation.member && vaildation.comment){
      return true
    }
  };

  const onChange = (e) => {
    const { value, name } = e.target;
    setForm({ ...form, [name]: value });
    setVaildation({ ...vaildation, [name]: value != "" ? true : false });
  };

  const add = useCallback(() => {
    if(checkVaildation()){벨리데이션 성공할때 수행할 함수}