✅ 데이터 패칭이란?

웹 에플리케이션에서 서버로부터 데이터를 가져오는 기능을 뜻한다. 이러한 작업을 단순화하고 관리를 유용하게 하기 위해 사용하는 것이 데이터 패칭 라이브러리 이다.

주로 웹 API를 통해 데이터를 요청하고, 응답을 받아와서 애플리케이션의 상태를 업데이트하는 작업을 처리한다.
또한 데이터 패칭 라이브러리는 HTTP 요청, 상태 관리, 오류 처리 등 다양한 기능을 제공하여 데이터를 효율적으로 관리하고 렌더링을 업데이트 하는 데 도움을 준다.

상태관리 라이브러리와의 차이점은, 상태 관리 라이브러리는 client 측의 상태를 관리하고, 데이터 패칭 라이브러리는 server 측의 데이터 정보를 관리한다는 점이 있다.

◾ 게시글을 보여주는 방법 (Next js 13)

내가 supabase를 통해서 게시글 데이터를 보여주기 위해 시도했던 여러 방법들을 적어보려고 한다.

Server Component

처음에는 서버 컴포넌트로 게시글 리스트를 받아와서 그대로 보여주는 방법으로 해보았다.
아래와 같은 느낌으로 바로 데이터를 전달해주는 방법을 사용해보았다

const { getServerData } = await serverData();
return <Component Data={getServerData} />;

하지만 위에 문제점은 매 요청마다 서버에 요청하는 것,
하위 컴포넌트가 렌더링 될 때 데이터가 최신화 되지
않는 문제가 있었다.

그러한 문제로 인하여 위에 방법은 사용하지 않았다.

zustand를 이용한 데이터 보관

두 번째로는 zustand를 이용하여 데이터를 초기에 보관하고 나머지 부분에서 사용하는 방법을 사용해 보았
다.

하지만 위에 방법도 데이터 최신화라는 문제가 있었고사용하는 DB테이블마다 store를 만들어야하는 귀찮음도 있었다.

결국에는 React-query

결국에는 React-query로 결정지었다 custom hooks을 만들어서 데이터를 가져옴과 동시에 useQuery에 등록시
키고그 데이터를 가지고 화면을 구성하였다. 또한 isLoading, isSuccess를 통한 다양한 화면 구성을 할 수
있었고데이터 캐시를 통해 서버에 부담을 줄일 수 있었다.