[딸기마켓] 리팩토링(react-hook-form, 커스텀 훅)

기존의 코드에서 react-hook-form 라이브러리와 커스텀 훅을 사용해서 리팩토링을 진행했습니다.

코드 길이를 줄일 수 있게 되면서 기존의 container, presenter로 구분되어 있던 파일들도 하나로 통합했습니다.

 

추가

커스텀 훅 추가

커스텀 훅들을 정리해놓은 hooks 파일이 추가되었습니다.

 

 

수정

모든 파일을 수정했으나, 수정 내용을 모두 기록하기에는 그 내용이 너무 많아서 대표적으로 게시판 작성 컴포넌트의 수정 전과 후만 기록하도록 하겠습니다.

다른 컴포넌트들의 수정 내용은 게시판 작성 컴포넌트의 수정 과정과 거의 동일합니다.

 

react-hook-form을 이용한 리팩토링

기존의 인풋 폼에서 onChange함수를 통해 state와 연결해주던 코드를 useForm 훅을 사용해 리팩토링했습니다.

state들을 길게 나열할 필요가 없어지고, onChange 함수들을 굳이 만들 필요가 없어지면서 코드 길이가 눈에 띄게 줄었습니다.

yupResolver와 yup, formState를 사용해서 기존의 에러 메시지를 출력하기 위해 정의해둔 state 또한 사용하지 않도록 했습니다.

 

 

커스텀훅을 이용한 리팩토링

기존의 리액트 훅을 통해 사용하던 코드들을 다른 파일로 모아 사용하면서(커스텀 훅) 코드 길이를 줄였습니다.

 

 

이미지 첨부 컴포넌트 분리

이미지 첨부 컴포넌트를 분리해서 관리하도록 했습니다. 게시판 등록 컴포넌트의 코드 길이가 줄어들고, 코드 가독성이 좀 더 좋아졌습니다.

 

 

리팩토링 이후의 index 파일의 코드 길이는 183라인입니다.

기존의 container, presenter 파일의 코드 길이 430라인에서 유의미하게 줄어든 것을 확인할 수 있습니다.

 

---

 

모든 코드는 아래 링크에서 확인할 수 있습니다.

https://github.com/Cheolyong-Kim/Ddalgi