React: useForm을 활용해서 다른 컴포넌트 간에 변수 주고 받는 예제 # useForm # watch # useFormContext # 파일 업로드

필요사항

 

API를 통해 글을 작성하고, 파일을 업로드를 한 화면에서 해야함

글 작성의 request 양식은 application/json 이지만,

파일 업로드의 request 양식은 multipart/form-data 으로 나눠져 있음

 - 하나의 useForm에 파일 정보를 담지 않고 구분해서 사용

 - 글 작성을 먼저 한 후 글의 id값을 받아서 파일을 업로드하는 방식으로 구현

   -> Form내의 handleSubmit과 업로드 될 파일을 불러오는 로직을 분리

 

파일업로드와 관련된 부분을 리팩토링하여 별도로 빼두었기에, 컴포넌트간 변수를 주고, 그 값을 변화시켰을 때,

변화된 값을 가진 변수를 받을 수 있어야 함

  -> useState의 setState 부분을 활용

 

 

예제 커밋: https://github.com/Junanjunan/g6_react/commit/6e76d4a9d575d8b2d73a8713c5db86bdc5fa8957

[add] Get files of inputs from another component · Junanjunan/g6_react@6e76d4a