프로젝트의 주제

• 주문내역 관리 어드민 페이지 구현

프로젝트의 요구사항

1. 주어진 데이터를 이용하여 주문 목록 페이지를 구현해주세요
   • 주문 목록 페이지에는 주문에 대한 모든 정보를 표 형태로 확인할 수 있어야 합니다.
   • 주문 목록은 페이지네이션이 구현되어야 합니다(한 페이지에 50건의 주문이 보여야 합니다)
   • 데이터 중에서 오늘의 거래건만 보여지도록 해주세요
     • 여기서 오늘은 “2023-03-08”일을 의미합니다.
2. 정렬 기능을 구현해주세요
   • 기본 정렬은 ID 기준 오름차순으로 구현해주세요
   • 표에서 주문번호, 거래일 & 거래시간 버튼을 누르면 각각 내림차순 정렬이 되도록 해주세요
3. 주문 처리 상태에 따라 filtering 기능을 구현해주세요
4. 고객이름을 검색할 수 있도록 해주세요
5. 서버에 들어온 주문을 5초마다 최신화 해주세요
   • 서버 API는 구현되어 있지 않지만, 구현되어 있다는 가정 하에 요구사항을 충족해주세요
6. 컴포넌트에 대한 테스트 코드를 구현해주세요

프로젝트에서 도입된 주요 기술

컴포넌트 구조 및 폴더 구조

📦src
 ┣ 📂components
 ┃ ┣ 📂layouts
 ┃ ┃ ┣ 📂FilterSection
 ┃ ┃ ┃ ┣ 📂FilterRadios
 ┃ ┃ ┃ ┣ 📂SearchField
 ┃ ┃ ┗ 📂Header
 ┃ ┗ 📂public
 ┃ ┃ ┣ 📂DataTable
 ┃ ┃ ┃ ┣ 📂BodyRows
 ┃ ┃ ┃ ┣ 📂HeaderRow
 ┃ ┃ ┗ 📂Spinner
 ┣ 📂constants
 ┣ 📂helpers
 ┃ ┣ 📜fetchOrder.ts
 ┃ ┗ 📜filterOrderList.ts
 ┣ 📂hooks
 ┃ ┗ 📜useFetchOrder.ts
 ┣ 📂pages
 ┣ 📂router
 ┣ 📂types
 ┣ 📂utils
 ┃ ┣ 📜getToday.ts
 ┃ ┣ 📜httpClient.ts
 ┃ ┗ 📜querySplit.ts
 ┣ 📜App.tsx
 ┣ 📜main.tsx
 ┗ 📜vite-env.d.ts

UI

• UI 컴포넌트들의 구성은 생각보다 단순하다.
• 필터를 그려주는 FilterSection, 그리고 표를 그려주는 DataTable이렇게 두가지로 나뉘고
  • FilterSection은 다시 처리상태로 필터하는 FilterRadios와
  • 검색어로 필처하는 SearchField 이렇게 두가지 컴포넌트로 나뉘고
  • DataTable은 표의 상단부이자 정렬을 하게 해주는 HeaderRow
  • 그리고 필터링 된 목록들을 그려주는 BodyRow로 나뉜다.
  • MUI를 썼기 때문에 UI컴포넌트의 부피가 줄어들었다.

data

• 반면 데이터의 흐름은 조금 복잡한데 거기에 react query가 들어간다.
• 우선 useQuery를 사용하는 useFetchOrder가 5초마다 한번씩 데이터를 서버로부터 받아온다.
• 그리고 총 3군데에서 useSearchParams를 이용해 필터링이 이루어진다.
  • FilterRadios
  • SearchField
  • Orders에서 HeaderRow에 props로 전달하는 handleRequestSort
• 이 searchParams를 이용해 필터링 조건을 다 만들면
• Orders에서 react query를 이용해 data를 fetching하고 그 데이터를 BodyRows에 뿌려주는 형식이다.

useSearchParams를 이용한 필터링

• 그동안 해왔던 쿼리스트링을 이용한 필터링을 useSearchParams를 이용해 해보자.
• 위에서 썼듯이 각각의 필터되는 컴포넌트에서
  • const [searchParams, setSearchParams] = useSearchParams();
  • 를 해주고 filter가 변할때마다 …filter를 해주어 변한 값만을 필터조건에 추가해주면 된다.
• 이렇게까지만 해주면 쿼리스트링에 지속적으로 필터조건들을 넣어줄 수 있다.

react-query

• filterOrderList를 보면 우리가 지금까지 useSearchParams로 작업했던 쿼리스트링이 reducce를 통해 더해지는 것을 볼 수 있다.
• 이 필터링해야하는 조건들만을 가지고 useQuery를 사용해서 실시간으로 주문을 조회할 수 있다.
• 필터의 조건이 바뀌면 바로 서버로부터 데이터를 받고 그 바뀐 조건들을 다시 하나씩 대입하여 필터링된 데이터목록을 받아낼 수 있다.
• 이 과정을 정리하면
  • 유저가 처리상태를 바꾸면 setSearchParams로 searchParams값이 변한다.
  • params값(쿼리스트링)이 변하면 그 params값이 그 자체로 필터조건이 되어 useQuery가 있는 useFetchOrder라는 custom hook으로 전달된다.
  • useFetchOrder에서는 useQuery를 하는데 이때 콜백함수(fetchOrder)로 필터조건들이 전달된다.
  • fetchOrder에서는 우선 서버와 http통신을 해서 신선한 데이터를 받고 이 받은 값을 filterOrderList로 필터조건과 같이 전달한다.
  • filterOrderList에서는 reduce를 통해 전달받은 필터조건들을 하나씩 다 비교하여 배열로 만들어 다시 최상위 부모컴포넌트에게로 끌어올려보낸다.
• 이렇게 하면 매 조건마다 서버로부터 신선한 데이터를 받아 필터링을 하기 때문에 검색을 할 때 조차 한 글자씩 spinner가 도는 것을 확인할 수 있다.

updated 시간 표기

• useQuery의 반환값중에는 dataUpdatedAt이란게 있는데 공식문서를 찾아보면
  • dataUpdatedAt: number
    • The timestamp for when the query most recently returned the status as "success".
  • 즉 최근에 반환받은 성공한 상태의 timestamp를 반환하는 것을 알 수 있다.
  • 우리는 useQuery에 refetchInterval로 5초를 넣었기에 Orders에 템플릿 리터럴로 이 dataUpdatedAt값을 넣어주면 5초마다 혹은 우리가 필터조건을 바꿀때마다 updated 시간이 변경되는 것을 확인할 수 있다.

끝으로

• 이번과제에서는 react query에 강력함에 대해 알게 되었다.
• 프론트엔드 아키텍쳐를 공부하다보면 마지막으로 react query가 나오고
• 많은 기업들이 react query를 사용하고 있다고 하는데 왜 사용하는지 알게 되었다.
• 이렇게 서버와의 fetch 영역을 Model로 간주하면 redux의 그 어마어마한 보일러 플레이트를 감당할 필요가 없으며
• 백엔드와 직접 연동을 하기에 전역상태관리 흐름이 매우 단순해지는 엄청난 효과가 있다.