26.2.2 포스트 목록 조회 API 연동하기

PostList 컴포넌트에서 실제 데이터를 보여 줄 수 있도록 API를 연동해 봅시다. 우리가 사용할 list API는 username, page, tag 값을 쿼리 값으로 넣어서 사용합니다. API를 사용할 때 파라미터로 문자열들을 받아 와서 직접 조합해도 되지만, 여기서는 qs 라이브러리를 사용하여 쿼리 값을 생성하겠습니다. 이 라이브러리를 사용하면 쿼리 값을 더 편리하게 생성하고 JSON으로 변환할 수 있습니다.

yarn으로 qs를 설치하세요.

$ yarn add qs

그리고 lib/api/posts.js 파일에 다음 함수를 추가하세요.

lib/api/posts.js

import qs from 'qs';
import client from './client';

export const writePost = ({ title, body, tags }) =>
  client.post('/api/posts', { title, body, tags });

export const readPost = id => client.get(`/api/posts/${id}`);

export const listPosts = ({ page, username, tag }) => {
  const queryString = qs.stringify({
    page,
    username,
    tag,
  });
  return client.get(`/api/posts?${queryString}`);
};

---