프론트 UI가 어느정도 만들어진 후
백엔드와 연동을 해야하는 마지막 과제가 남아있다.
백엔드 연동은 .post일 때와 .get일때 과정이 달라진다. 먼저 .get부터 알아보자.
.get
get을 써야할 때는 프론트앤드에서 필요한 데이터를 백엔드에서 가져올 때 사용된다.
get이 쓰이는 상황을 예시로 들어보자
먼저 하고자 하는 바는
React 컴포넌트에서 게시글을 조회하고 상태를 다룰 수 있도록 get을 이용해 게시글 정보를 불러오자
이고,
해당 게시글의 api 명세는
export interface IPostContent {
author?: {
nickname?: string;
profileImage?: string;
userId?: number;
};
blogUrl?: string;
content?: string;
createdAt?: string;
hashtags?: string[];
isAuthor?: boolean;
isLiked?: boolean;
isPrivate?: boolean;
isScraped?: boolean;
likesCount?: number;
postId?: number;
repliesCount?: number;
thumbnail?: string;
title?: string;
viewsCount?: number;
}
Swagger의 api는
이렇게 된다.
먼저 해당 게시글을 조회하는 api 호출을 담당하는 함수를 만들어보면
export const getPostApi = async (params: IPost) => {
const { data } = await defaultInstance.get('/post', { params });
return data;
};
이렇게 만들 수 있다.
해석해보자면,
'async' 키워드를 사용하여 비동기적으로 동작하며,
'defaultInstance' 라는 HTTP 클라이언트 인스턴스를 사용하여 '/post' 엔드포인트에 get 요청을 보낸다.
조회할 때 필요한 매개변수는 'params'로 전달되며, 응답에서 추출한 데이터를 반환한다.
export const useGetPostQuery = (params: IPost) => {
const { isLoading, error, data } = useQuery([`post`, params], () => getPostApi(params));
return { data, isLoading, error };
};
useGetPostQuery 훅은 'params'를 인자로 받아서 'getPostApi' 함수를 호출하고, 그 결과로 부터 비동기적으로 데이터를 가져온다.
'useQuery'의 첫 번째 매개변서는 쿼리 식별자인데,
여기서는 ['post', params] 배열을 사용하여 고유한 쿼리를 식별한다.
이 쿼리 식별자는 재호출 시 사용된다.
최종적으로 훅은 객체를 반환하여 작업의 상태에 따라 'isLoading', 'error',
성공적으로 완료된 경우의 데이터를 담은 'data'가 포함되어 있다.
이렇게 함으로써 React 컴포넌트에서 이 훅을 사용하여 게시글을 조회하고 상태를 다룰 수 있게된다.
이를 활용하여
const { data: postData } = useGetPostQuery({ postId: Number(params.postId) });
const [post, setPost] = useState<IPostContent>();
useEffect(() => {
setPost(postData);
}, [postData]);
useGetPostQuery를 사용하여 데이터를 가져와 postData에 저장한다.
useEffect 훅은 컴포넌트가 마운트될 때 한번 실행된다.
'setPost(postData)'를 사용하여 가져온 데이트럴 'post' 상태로 설정한다.
'post' 상태는 'IPostContent' 타입으로 선언되어 있으므로, 해당 타입으로 게시글의 내용을 저장한다.