react typescript form이용 feat. useMutation

주제

회원가입을 하거나 설문조사를 제출하거나 등의 활동을 하거나 할때 어떻게 react를 구성해야할지

방법

1. useState를 이용해서 데이터 저장 후 각각 따로 보내기
2. form을 이용해서 submit하면 모든 데이터 한번에 보내기

1,2 방법 모두 사용할 수 있으나 서버와 통신하기 위해서는 form을 사용하는 것이 더 유용하다 따라서 form을 이용한 방식을 사용하도록 한다.

순서

1. useState를 통해 자신에게 필요한 정보들을 저장한다.
   만약 하나가 아니라 title,content, nickname 등 여러개라면
   board라는 새로운 객체를 만들어 그안에 title,content 등의 정보를 저장하고 구조분해를 이용한다!!

const [board, setBoard] = useState({
    title: '',
    content: '',
  })

  const {
    title,
    content,
  } = board

2. form에 입력에 필요한 정보들을 입력할 수 있도록 창을 만들어줌

form 태그안에 submit버튼을 클릭하면 일어날 postBoard라는 함수 만들어줌

<form onSubmit={postBoard}>
	<input value={title} placeholder="제목입력해라" onChange={handleTitleChange}/>
    <textarea value={content} placeholder="내용입력"
    onChange={handleContentChange}/>
    <button type="submit">제출</button> // 안해줘도됨 form형식 안의 모든 버튼은 submit이다.
<form/>

3. 입력한 값들이 변화할 때마다 title, content에 값을 변경시켜 저장해줌

input의 title이 변화할 때마다 이전 board의 값을 복사하고 title값만 변경시켜줌

textarea의 content가 변화할 때마다 이전 board의 값을 복사하고 content의 값만 변경

const handleTitleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setBoard((prevBoard) => ({
      ...prevBoard,
      title: e.target.value,
    }))
  }

const handleContentChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    setBoard((prevBoard) => ({
      ...prevBoard,
      content: e.target.value,
    }))
  }

4.useMutation를 이용하기 위해

board라는 객체를 보내는 axios post를 함수를 생성하고 useMutation을 이용해서 post보내기

export const postBoard = (board: BoardData) => {
  return axios.post(`${process.env.REACT_APP_BASE_URL}articles`, board)
}

export const usePostBoard = () => {
  const queryClient = useQueryClient()
  return useMutation(postBoard, {
    onSuccess: () => {
      queryClient.invalidateQueries('qna')
    },
  })
}

5. postBoard 함수 구현 - 서버에 axios로 post 보내기

useMutation을 사용하기 위해 postArticle이라는 함수 설정

const { mutate: postArticle } = usePostBoard()

e.preventDefault()는 form의 button을 눌리면 새로고침이 일어나기때문에 그 동작을 방지해야함

title과 content에 아무것도 입력되어 있지 않으면 반려
현재 입력된 title,content을 가지고 있는 새로운 article이라는 객체를 만들어줌

앞에서 만들었던 postArticle에 article객체를 담아 보내고 성공 시 동작할 코드 실패시 동작할 코드를 적어줌

const postBoard= (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault() // 기본 폼 제출 동작 방지
    if (title.length === 0) {
      alert('제목을 입력해 주세요.')
    } else if (content.length === 0) {
      alert('내용을 입력해 주세요.')
    } else {
      if (window.confirm('게시글을 등록하시겠습니까?')) {
        const article = {
          title: title,
          content: content,
        }
        postArticle(article, {
          onSuccess: () => {
            console.log(title)
            console.log(content)

            alert('게시글이 등록되었습니다.')
            navigate(`/freeboard`)
          },
          onError: (error) => {
            console.error('Error posting article:', error)
          },
        })
      }
    }
  }