URLSearchParams 유틸리티 메서드에 관해서

안녕하세요 TriplexLab 입니다.
오늘은 URLSearchParams 유틸리티 메서드에 관해서 이야기를 해보도록 하겠습니다.

URLSearchParams은 URL의 쿼리 문자열 받아서 처리하는 고마운 메소드 입니다.

바로 사용예시 확인해 봅시다. 😃😃

예시코드)👇🏻

// api/request.js

const apiFetchHandler = async (url) => {
    try {
        const response = await fetch(url);
        if (!response.ok) {
            throw new Error('데이터를 불러오는데 실패했습니다.');
        }
        const body = await response.json();
        console.log(body);
        return body;
    } catch (e) {
        console.log(e);
    }
};

const BASE_URL = 'http://localhost.com/api';

const defaultParam = {
    key: process.env.REACT_APP_PIXABAY,
};

export const api = {
    getProductData: (paramObj) => {
        const params = new URLSearchParams({
            ...defaultParam, //👈🏻기본적인 파라마터
            ...paramObj,	 //👈🏻인자로받는 파라미터를 더함.
        }).toString();
		console.log(params); //👈🏻여기서 결과를 확인해보면 다음과 같다.

        return apiFetchHandler(`${BASE_URL}/?${params}`);
    },
};

URLSearchParams를 사용해서 파라미터형식으로 만듬

사용한 예시)👇🏻

function App() {
    const [data, setData] = useState({ total: 0, totalHits: 0, hits: [] });
    const [query, setQuery] = useState('');
    const [order, setOrder] = useState('popular');
    const [orientation, setOrientation] = useState('all');
    const [page, setPage] = useState(1);
    const [perPage, setPerPage] = useState(20);
    
    // 코드 생략...

    useEffect(() => {
        const fetch = async () => {
            const data = await api.getProductData({ //👈🏻호출해서 사용하는 부분
                q: query,
                orientation: orientation,
                order: order,
                page: page,
                per_page: perPage,
            });
            if (page === 1) {
                setData(data);
            } else {
                setData((prev) => ({
                    //기존 값이 누적.
                    ...prev,
                    hits: [...prev.hits, ...data.hits],
                }));
            }
        };
        fetch();
    }, [query, orientation, order, page, perPage]);
    
    return (
    	 <>
         	// 코드 생략...
         </>
    )
};

export default App;

결과)
http://localhost.com/api/key=d2@#$@fds&q=&orientation=all&order=popular&page=1&_page=20

결국에는 위와 같은 결과가 fetch인자로 들어가서 서버랑 통신으로 시도하게 됩니다.!!
여기서 핵심은 api.getProductData함수 인자로 파라미터를 넘길때 객채형식으로 가독성좋게 보낼수 있다는것이 핵심 입니다!!