나만의 Hook으로 코드 정리하기
네트워크 처리 코드를 정리해보기
App.js파일에서 handleLoad함수에서 try catch문을 살펴보면
try 블록에서는 isLoading State를 true로 만들고
catch 블록에서는 Error State를 변경해준다.finally 블록에서는 isLoading State를 다시 false로 만들어준다.
ReviewForm.js파일에서 handleSubmit 함수를 살펴보면
마찬가지로 try catch문을 사용하고 있다.
이런 코드들을 함수로 만든다면 어떨까?
매번 똑같은 코드를 반복해서 사용하지 않아도 된다.
이런 코드들을 추상화해서 나만의 Hook함수 만들기
커스텀 Hook
이렇게 Hook을 사용하는 코드를 모아놓는 함수
hooks라는 폴더를 만들고 그 안에 useAsync.js파일을 만든다.
커스텀 Hook은 리액트 Hook을 실행하는 함수이기때문에 앞에 use를 붙여 사용한다.
이 함수는 비동기함수인 asyncFunction을 파라미터로 받고
로딩상태, 에러, 콜백을 실행할 수 있는 함수를 배열형태로 return할 것이다.
우선 useState로 pending과 error라는 State를 추가한다.
그리고 wrappedFunction이라는 비동기함수를 선언해준다.
이 함수안에 try catch문을 활용해서 로딩과 에러 처리를 해준다.
스프레드 문법을 사용하면
wrappedFunction에서 받은 파라미터를
그대로 asynFunction에다가 전달해줄 수 있다.
그리고 pending, error State와 함께 wrappedFunction을 배열 형태로 return해준다.
정리하기
여기서 wrappedFunction이라는 함수는 네트워크 리퀘스트를 보낼 때 쓸 함수
이 함수를 실행하게 되면
try catch문에서 비동기 처리를 하면서 asyncFunction이라는 함수를 실행하는데
asyncFunction은 기존에 사용하던 api함수에 해당한다고 생각하면된다.
이것은 실제로 리퀘스트를 보내는 함수가 된다.
asyncFunction의 return값을 그대로 return한다.
이렇게 우리가 원하는 함수를 덮어씌운 함수라는 의미에서
wrappedFunction이라는 이름을 붙여보았다.
Hook 적용하기
App.js파일에서 is:Loading과 loadingError State를 사용하는 부분은 지워주고
useAsync함수를 getReviews로 호출해준다.그리고 받아오는 함수의 이름은 getReviewsAsync라고 이름을 붙여준다.
handleLoad함수에서는 기존에 있던 try catch블록을 지우고
getReviewsAsync를 실행한 다음에
만약 return 값이 없으면 return해준다.
이렇게 하는 이유는 만든 useAsync에서 error가 난 경우에 return값이
undefined값이기 때문
error가 난 경우에 뒷 부분은 실행하면 안되기 때문에
함수에서 빠져나오도록 return 해준다.
ReviewForm.js에서도 똑같이 적용해준다.
useAsync를 onSubmit으로 호출해준다.
그리고 받아올 함수의 이름은 onSubmitAsync라고 이름을 붙여준다.
handleSubmit함수에서는
onSubmitAsync함수를 formData로 실행해준다.
마찬가지로 error가 발생한 경우에는 함수를 종료해준다.
저장하고 확인해보면
개발자도구 네트워크 탭에서 네트워크 속도를 낮춘 다음에 테스트해보면
로딩처리가 잘 되고
api.js에 가서 일부러 에러를 만들고 테스트해보기
커스텀 Hook을 만들면 코드가 깔끔해질뿐만아니라 수정하기도 편리하다.
이때 함수이름은 use로 시작하도록 지어 이 함수가 커스텀 Hook이라는 것을
다른 개발자들에게 표시해야한다.
