더북(TheBook)

21.3.1 포스트 리스트 API 함수 생성

 

우리는 getPostList 함수를 만들 것인데요. 이 함수에는 두 가지 옵션, tag 값과 page 값을 설정할 수 있습니다. 함수 파라미터로는 tag 값과 page 값이 있는 객체를 전달받으며, 객체로 전달된 값을 URL 쿼리로 변환하여 API 주소 뒷부분에 붙여 줍니다. (현재 구현된 API에는 tag 옵션을 설정하지 않았습니다. 이 부분은 나중에 구현합니다.)

이 작업은 query-string 라이브러리를 사용하여 수행합니다. 이 라이브러리는 앞서 리액트 라우터를 배울 때 사용해 보았지요? 이 라이브러리로 문자열 형태의 URL 쿼리를 객체 형태로 변환할 수 있고, 반대로 객체 형태를 문자열 형태로 변환할 수도 있답니다. 이 라이브러리의 v6 이상은 구형 웹 브라우저에서 호환되지 않기 때문에 설치할 때는 뒤에 @5를 붙여 v5를 설치하세요.

$ yarn add query-string@5

 

자, 이제 lib/api.js 파일에 새 함수를 만드세요.

src/lib/api.js

import axios from ‘axios’;
import queryString from ‘query-string’;

(...)
export const getPostList = ({tag, page}) => axios.get(`/api/posts/?${queryString.stringify({tag, page})}`);

 

객체를 URL 쿼리 문자열로 변환할 때는 이처럼 queryString.stringify 함수를 사용합니다.

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.