TIL 01.26

어제 보았던 react hook form을 이용하여 게시글 작성 기능을 구현하였다.

import styled from 'styled-components';
import { useForm } from 'react-hook-form';
import { useMutation, useQueryClient } from 'react-query';
import { v4 as uuidv4 } from 'uuid';
import axios from 'axios';
import { useNavigate } from 'react-router-dom';
import { authService } from '../common/firebase';

export default function PostPage() {
  const queryClient = useQueryClient();
  const navigate = useNavigate()
  const addVideo = useMutation((video) => axios.post('http://localhost:3001/videos', video), {
    onSuccess: (data) => {
      console.log(data);
      queryClient.invalidateQueries(['videos']);
    },
    onError: (error) => {
      console.log(error);
    },
  });
  const { register, handleSubmit, formState: { isSubmitting } } = useForm();
  const onSubmit = (data) => {
    const Video = {
      contetnId: '1',
      createAt: Date(),
      userId: authService.currentUser.uid,
      nickName: authService.currentUser.displayName ?? '닉네임없음'  
    };
    const newVideo = Object.assign(Video, data);
    addVideo.mutate(newVideo);
    alert('작성 완료')
    navigate('/')
  }
  const onError = (error) => {
    console.log(error);
  }
  
  return (
    <Container>
      <Text>게시물 작성</Text>
      <Form onSubmit={handleSubmit(onSubmit, onError)}>
      <Input type={'url'} 
        maxLength={'120'} 
        placeholder='url'
        required
        {...register('videoUrl')} />
      <Input type={'text'} 
        maxLength={'120'} 
        placeholder='제목'
        required
        {...register('title')} />
      <Textarea type={'text'} 
        placeholder='내용' 
        required
        {...register('content')} ></Textarea>
      <BtnBox>
      <Button type='submit' style={{marginRight:'20px'}} disabled={isSubmitting}>완료</Button>
      <Button type='button' onClick={()=>navigate(-1)}>취소</Button>
      </BtnBox>
      </Form>
    </Container>
  )
}

register : 글을 작성할 때 사용

handleSubmit : 입력한 내용 전달할 때 사용

 

다른 방법과 달리 input창에 {...register('videoUrl')}을 적어주면 입력한 내용이 전달된다.

+ 새로 접한 라이브러리로 협업을 하다보니 팀원들이 코드 이해하는데 어려워하는 것 같다.

PR하기전에 주석을 남겨서 해야될 것 같다.