[React Query] axios(API) + react-query(Custom Hook) + 호출 방식으로 사용하는 이유

처음 적용하게 된 이유

윈터데브캠프 2기를 하면서 진행했던 프로젝트에서 처음으로 적용을 했었습니다. 함께 했던 팀원 분께서 원티드 프리온보딩 강의 중에 해당 방식으로 코드를 짜는 분의 GitHub를 참고해서 해보면 어떨까라고 제안을 해주셨고, 해당 방식대로 코드를 짜보려고 해보았습니다.

당시에 위와 같이 axios의 api별 호출 → react query를 활용한 hook문 → hook을 호출 하는 방식으로 진행을 하였습니다. 이렇게 코드를 짜던 제 당시 상황은 “JavaScript도 완벽하게 모르는데 내가 TypeScript를 할 수 있나?”에 “React Query는 api 호출하는데 쓰는 친구인가?” 정도 였습니다. 지금 돌아봤을 때 팀원 분이 정말 잘할 수 있도록 끌어올려주셨다고 생각합니다.

이런 상태에서 위와 같은 방식으로 코드를 작성했을 때 좋았던 점을 정리해보자면

1. Axios, React Query, 호출을 다 다른 곳에서 해주면서 에러가 발생했을 때, 렌더링 관련 해서 이슈가 생겼을 때 어느 지점에서 문제가 발생했는지 좀 더 빠르게 파악이 가능했던 것 같습니다.
2. 코드를 작성하는 규격이 생기다 보니, API 명세서만 빠르게 이해한다면 빠른 속도로 서버에 api 호출을 하고 데이터 패칭을 하는 파트에 대한 코드를 짜는데 속도가 빨라졌던 것 같습니다.

이것 외에도 당시에 느꼈던 장점이 여러가지 있지만, 그건 나중에 생각나면 추가 해두는 걸로.

그래서 왜 이렇게 쓰는 걸까요?

그래서 이렇게 윈터 데브캠프 2기를 하고 나서 한동안은 이런 식으로 React Query를 사용해왔던 것 같습니다. 그렇게 몇 가지 프로젝트를 하다가 너무 익숙해져 버린 것도 있었지만, “이렇게 쓰는 이유가 뭐지?”와 “React Query가 이런 목적으로 만들어진게 맞나”라는 의문을 가질 때 쯤 윈터데브캠프 2기에 이어서 지난해 12월 부터 RE:CAMP를 하게되었습니다. 캠프를 하면서 다른 프론트 분들과 여러 이야기를 나눌 수 있었고, 특히 같이 함께하는 팀원 분의 추천으로 우아콘에서 나왔던 “프론트엔드 상태관리 실전편”을 보게 되었습니다.

해당 영상에 대해서는 블로그에 따로 정리를 해뒀으니 참고하시기 바라고
https://jacky0831.tistory.com/entry/우아콘-프론트엔드-상태관리-실전편을-보고-나서

그래서 이 영상을 보면서 알게 된 점을 정리해보면, 상태관리에는 클라이언트에 대한 부분과 서버에 대한 부분이 나눠져 있다는 점. 그리고 React Query를 사용하는데 있어서 레이어를 나눠 코드를 작성함으로써 얻을 수 있는 장점이 많다는 점이었습니다.

제가 이 영상을 보기 전에 생각했던 장점에 대해서 다시 한번 보겠습니다.

1) Axios, React Query, 호출을 다 다른 곳에서 해주면서 에러가 발생했을 때, 렌더링 관련 해서 이슈가 생겼을 때 어느 지점에서 문제가 발생했는지 좀 더 빠르게 파악이 가능했던 것 같습니다.

2) 코드를 작성하는 규격이 생기다 보니, API 명세서만 빠르게 이해한다면 빠른 속도로 서버에 api 호출을 하고 데이터 패칭을 하는 파트에 대한 코드를 짜는데 속도가 빨라졌던 것 같습니다

영상 참고해서 1), 2)에 대해서 제가 이해한 바를 적어보자면, 1)과 같이 나눠서 코드를 작성하는 것이 결국 아키텍처 내부를 레이어화 해서 나누는 것을 통해서 기존에 컴포넌트 안에 몰빵 되어져 있던 코드를 나누는 것 이라고 보입니다. 이를 통해서 코드의 가독성을 높힘과 동시에 에러 처리나 데이터 패칭 부분에 대한 유지 보수가 좀 더 용이해질 수 있지 않았나 생각합니다.

그리고 이렇게 레이어를 나눔으로써 추후에 기능이 추가 되거나 변경 되었을 때 레이어 별로 수정/추가를 하면 되기 때문에 제가 2)에서 느꼈듯이 효율적으로 진행을 할 수 있게 된 것 같습니다.

그래서 위와 같은 과정을 통해서 코드를 작성함으로써 컴포넌트를 구성할 때 레이어별로 구현 후에 레고를 결합하듯이 유기적으로 구성을 할 수 있음과 동시에 프로젝트(프로덕트)를 진행할 때 변화되는 요구사항이나 변경사항에 대해서 유연하게 대처할 수 있게 된다고 생각합니다.