Suspense/Error boundary, spinner 구현

[cla6shade]

변경점 👍

• Suspense 및 Error Boundary 컴포넌트를 구현했습니다.
• spinner을 구현했습니다.
• 스터디 검색 메소드 및 쿼리, response 타입을 정의했습니다.

Suspense, ErrorBoundary에 대해

Suspense는 선언적인 리액트의 특성에 맞춰 서버 요청, 데이터 fetch, 표시를 선언적으로 할 수 있도록 도와주는 컴포넌트입니다. React API의 일부이고, ErrorBoundary와의 결합을 통해 에러 및 데이터 로딩 처리를 간편하게 할 수 있습니다.

사용하려면 react-query의 useSuspenseQuery 또는 useInfiniteQuery를 사용하는 컴포넌트를 로 감싸면 되는데요, 구글링해보시면 예제를 쉽게 찾으실 수 있습니다.

default Fallback UI를 사용하려면 제가 내부적으로 구현해놓은 SuspenseErrorBoundary를 사용하시면 됩니다.

return (
  <SuspenseErrorBoundary>
    <StudyGridWrapper /> // StudyGridWrapper 내부에서 useSuspenseQuery 훅 사용 중
  </SuspenseErrorboundary>
);

다만, 이 블로그에 나온 내용을 유의하여 사용해주세요.

[mingkyeongg]

확인했습니다. 고생하셨습니다~
혹시 select에서 placeholder를 없앤 이유가 value값 문제 때문일까요??