[React, Axios] header에 Authorization 담기 with kakao rest api

??? : 요청 보낼 때 헤더에 키 담아서 보내주세요

처음 해보면 뭔 소린가 싶을 수도 있다.
내가 사용했던 방법을 포스팅 해보고자 한다 !

예시는 카카오 키워드 검색으로 들었다.

내가 작성했던 코드는, 키워드를 넘겨주면 그 키워드로 검색하고, 검색 결과를 props로 넘겨준 updater 함수를 통해 place 라는 상태 변수를 업데이트 해주는 코드였다. 프로젝트에서 사용할 때, 검색 결과가 나올 때마다 바로 렌더링 해줘야 했기 때문에 상태변수에 장소 검색 결과를 저장하는 방식을 사용했다.

사용한 방법을 염두에 두고 코드를 보자 !

SearchList.js

import { useEffect, useCallback} from "react";
import axios from 'axios';

const SearchList = (props) => {
    const fetchUsers = useCallback(async () => {
        try {
          props.setPlace(null);
          const response = await axios.get(
            'https://dapi.kakao.com/v2/local/search/keyword.json?sort=accuracy&page=1&size=10&query='+props.Keyword, 
            {
              headers: {
                'Authorization': "KakaoAK 발급받은키"
              },
            }
          );
          props.setPlace(response.data);
        } catch (e) {
          console.log(e);
        }
    }, 
    [props.Keyword]
    );

    useEffect(() => {
        fetchUsers();
    }, [fetchUsers]);
}

export default SearchList;

header 칸을 보면 'Authorization'이라는 항목에 키를 담아둔 것을 볼 수 있다. 그리고 키는 웬만하면 raw 하게 적지 말고, 보안을 위해 환경 변수를 쓰도록 하자.
환경 변수 쓰는 법은 이전 포스트 참고 !

url에 있는 쿼리 parameter 중 page와 size는 기호에 따라서 다르게 쓰면 된다.
자세한 내용은 공식 문서를 참고하자.

다른 페이지에서 사용할 때

import React, { useState } from "react";

const [place, setPlace] = useState(null);
<SearchList Keyword={Keyword} setPlace={setPlace}></SearchList>

위 코드에서 보다시피 SearchList를 부를 때 props로 Keyword와 place의 updater 함수를 넘겨주고 있다.




++ 그리고 api 호출 횟수는 하루에 3천번 제한이다,, 나도 알고 싶진 않았다 ^_^

{"errorType":"RequestThrottled","message":"API limit has been exceeded."}