[refactoring] React Query를 이용한 서버 상태 분리

다음은 원티드 프리온보딩 프론트엔드 챌린지 CRUD w ReactQuery 과제 중 진행된 리팩토링 사항이다.

# 캐싱 # 관심사의 분리

첼린지 소개 페이지

프리온보딩 프론트엔드 챌린지 1차 | 원티드

구현한 코드 깃허브

GitHub - ggsno/wanted-pre-onboarding-challenge-fe-1: Learning CRUD with React Query

 

🏁 목적 | 관심사의 분리, 서버데이터 동기화

◼ 서버의 데이터를 다루는 부분과 클라이언트의 상태를 분리해 관심사의 분리

◼ react query를 이용해 클라이언트에서 최신의 서버 데이터를 사용할 수 있도록 처리

📌 기존 코드 | 서버의 데이터를 클라이언트의 상태에 저장해 두고 사용

◼ 클라이언트의 state에 서버의 데이터를 fetch해서 사용함

  :: state에 저장된 서버 데이터가 최신이라는 보장이 없기 때문에 항상 새로운 요청을 하거나 유효성 로직을 추가해야했음

◼ 서버와 관련된 로직을 src 폴더 최상위의 hooks와 api에서 사용

✅ 변경 코드 | react-query(TanStack Query)

◼ 클라이언트의 상태에 서버 데이터를 직접 저장하지 않고 react-query(TanStack Query)의 useQuery로 캐싱하여 사용.

하나의 hook에 관련 쿼리 전부를 넣어서 관리

  - 모든 todo를 불러오는 쿼리와 id를 받아 하나의 todo를 불러오는 쿼리를 하나의 hook으로 묶기 위해 후자의 경우에는 인자로 id를 넘겨 분기를 나눔

 

◼ services 폴더에 서버와 관련된 정보들을 모두 담아서 사용

api와 도메인 관련 hooks들

◼ model 폴더에 도메인 관련 스키마들을 넣어서 사용

todo의 쿼리 키도 타입들과 함께 관리

💡 더 알아보고 싶은 것 | model 폴더, hook의 인자

◼ model 폴더는 types와는 조금 다르게 도메인과 관련된 스키마가 들어감. 스키마에 타입이 포함 되니까 기존에 있던 types 폴더를 model로 바꾸고 type파일에 쿼리 키 들을 추가해줬는데 맞는 접근일까?

 

◼  todo와 관련된 쿼리들을 하나의 hook으로 묶음. 모든 todo 혹은 하나의 todo를 가져오는 useQuery를 구분하기 위해 후자의 경우는 hook의 인자로 todo id를 전달함. 그런데 hook의 인자 값은 보통 초기 상태 값인 것 같은데, 인자를 통한 분기는 직관적이지 않은 코드일까? 

💌 피드백

◼ Model(도메인 관련)이 아닌 types도 있기 때문에 별도로 유지해주는게 좋을 것 같다.