[멋사12기] 리액트(react), axios | 6주차 세션 및 과제 제출

 

6주차 세션

 

 

6주차에는 리액트에서 axois를 활용해 api를 불러오는 실습을 진행했다.

 

먼저 지도 api를 활용해 화면에 지도가 표시될 수 있도록 axios요청을 작성하는 실습이 이루어졌다.

 

 

카카오 지도 api를 사용했으며,

axios GET 요청으로 response의 status가 200이라면 버튼을 눌렀을 때 상태가 연결 성공으로 변하게끔 상태를 설정해주었다.

 

 

api를 활용한 요청도 정상적으로 불러와져 화면에 표시되었고,

axios 요청도 정상적으로 작동하는 것을 볼 수 있었다.

 

카카오 지도 불러오기

 

 

728x90

---

 

 

세션에서 api를 활용해봤기 때문에 과제 또한 api를 활용해볼 수 있는 실습으로 주어졌다.

 

공공데이터 api를 활용해 리액트로 불러오는 실습이었다.

 

 

실습 과정을 간단하게 정리하자면, 다음과 같은 순서로 진행했다.

• useState, useEffect를 활용해 오픈 api에서 데이터를 불러와 화면에 표시하는 코드 구현
• axios로 api 호출 → 데이터 불러오기
• 접근할 url 정의 → 공공데이터 api 주소
• App 함수형 컴포넌트 : 컴포넌트의 상태로 data, loading, error를 관리loading: 데이터를 불러오는 동안 로딩 상태를 관리
• error: 요청 중 발생한 오류를 저장
• data: API로부터 받아온 데이터를 저장
• fetchData 함수 : async/await 패턴을 사용해 비동기적으로 API 호출을 수행 → 성공적으로 데이터를 받아오면 setData를 통해 상태를 갱신하고, 오류가 발생하면 setError를 통해 오류 상태를 설정 → 데이터를 불러오는 동안 setLoading을 이용해 로딩 상태를 관리
• useEffect : fetchData 함수를 호출
• 로딩 중일 때는 "Loading..." 텍스트를 표시& 오류가 있을 경우 오류 메시지를 표시 & 데이터가 없을 경우 아무것도 표시하지 않음
• data.item이 존재하고 배열이 비어있지 않은 경우, 음식점 데이터를 순회하며 각 항목을 화면에 표시 → 각 음식점 정보에는 식당명, 홈페이지, 주소, 연락처, 운영 시간, 대표 메뉴, 메인 이미지 등이 포함

 

 

데이터를 불러오는 과정에서 오류가 발생하기도 했는데,

response로 받고 있는 데이터의 형태를 제대로 파악하지 못해 발생한 에러였다.

 

item이 저장되고 있는 위치가 response.data가 아니라 response.data.getFoodKr이었고,

개발자도구에서 데이터가 불러와지는 형태를 확인한 후 item 배열이 response.data.getFoodKr 안에 존재하는 것을 발견하고 코드 수정항 후로는 공공데이터가 제대로 불러와지는 것을 확인할 수 있었다.

 

const fetchData = async () => {

    try {

      setError(null);

      setData(null);

      setLoading(true);

      const response = await axios.get(URL, {

        params: {

          serviceKey: process.env.REACT_APP_API_KEY,

          numOfRows: 10,

          pageNo: 1,

          resultType: 'json'

        }

      });

      console.log(URL);

      console.log(response);

      setData(response.data.getFoodKr);

    } catch (e) {

      setError(e);

    }

    setLoading(false);

  };

 

 

api를 활용할 때에는 response가 전달되고 있는 위치도 매우 중요하기 때문에 신경써서 값을 작성해주어야한다.

 

공공데이터 api활용하기

 

 

실습 전체 코드는 깃허브에서 확인할 수 있다.

 

https://github.com/BB545/likelion/tree/main/06_session