PROJECT/개념 설명

백엔드와 연동

dev-js 2023. 11. 13. 23:48

 

프론트 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' 타입으로 선언되어 있으므로, 해당 타입으로 게시글의 내용을 저장한다.

728x90

'PROJECT > 개념 설명' 카테고리의 다른 글

백엔드와 연동(2)  (0) 2023.11.14
스웨거  (2) 2023.10.15
Map  (2) 2023.10.08
Component  (0) 2023.10.02
State  (0) 2023.10.02