[React] react-async 로 요청 상태 관리하기

yoon052·2023년 5월 30일

ReactBasic

목록 보기
17/17
post-thumbnail

매번 프로젝트를 만들 때 마다 직접 요청 상태 관리를 위한 커스텀 Hook 을 만들기 귀찮다면, 이 라이브러리를 사용하면 된다. 정말 많은 기능들이 내장되어 있다. 사용법이 조금 다르다. 우리가 만들었던 커스텀 Hook 은 결과물을 배열로 반환하는 반면 이 Hook 은 객체 형태로 반환한다.


react-async 라이브러리는 정말 편하다.
우리가 이전에 직접 만들었던 useAsync 와 크게 다를 건 없는데, 측면에서는 우리가 직접 만든 Hook 이 편할때도 있다. 예를 들어서 Hook 의 옵션이 굉장히 간단하다. 그리고, watch 같은 것 대신에 deps 를 사용하기도 하고, 반환 값이 배열 형태이기 때문에 (리액트 자체 내장 Hook 과 사용성이 비슷하다는 측면에서) 더욱 그렇다.


반면에 react-async 의 useAsync 는 옵션이 다양하고 (promiseFn, deferFn, watch, ...) 결과 값도 객체 안에 다양한 값이 들어있어서 (run, reload, ...) 헷갈릴 수 있는 단점이 있긴 하지만 다양한 기능이 이미 내장되어있고 (예를 들어서 요청을 취소 할 수도 있습니다.) Hook 을 직접 만들 필요 없이 바로 불러와서 사용 할 수 있는 측면에서는 정말 편하다.


그렇다면 과연 Hook 을 직접 만들어서 써야 할까 아니면 라이브러리로 불러와서 사용 해야 할까? 정해진 답은 없다.

만약 우리가 직접 만들었던 useAsync 의 작동 방식을 완벽히 이해하셨다면 여러분의 필요에 따라 커스터마이징 해가면서 사용 할 수 있으니까 직접 만들어서 사용하는 것을 권장한다. 특히나, 연습용 프로젝트가 아니라, 오랫동안 유지보수 할 수도 있게 되는 프로젝트라면 더더욱 추천한다.

반면, 작은 프로젝트이거나, 직접 만든 useAsync 의 작동 방식이 조금 어렵게 느껴진다면 라이브러리로 설치해서 사용하는것도 좋다.

profile
개발자 지망생

0개의 댓글