🛰 API 호출로 프로젝트에 필요한 데이터 GET해오는 방법 (Feat. 프론트앤드, React)

여름이었다 .. 

프로젝트 제작을 위해 필요한 데이터가 있다면 API 호출을 통해 받아올 수 있는데

 

리액트의 경우 JSX 파일 내부에 무작정 자바스크립트 코드(호출을 위한)가 너무 많으면 가독성에 좋지 않기 때문에 별도의 js 파일을 만들어 분리하는 것이 좋다.

 

프로젝트에서 api 호출이 빈번할 경우라면, service 폴더를 생성해 호출 관련 js 코드를 한곳에 관리해주면 깔끔한 분류가 가능하다. 😉

src 폴더 > service 폴더 속 API 호출 관련 JS 파일

 

 

ex) 특정 사이트의 식단 데이터를 요청하는 경우 ( = API 호출을 통해 데이터를 받아와준다 )

 

1 .  사이트를 방문해 API 호출을 원하는 데이터를 확인한다.

가져오고 싶은 데이터가 표시된 사이트 화면

 

2 . 개발자 도구 ( F12 ) 속 - Network 창에 접속해 식단 데이터가 담긴 파일을 확인한다.

실제 사이트에서 전송받아 사용하는 식단 데이터 확인 at 네트워크 창

Preview 창을 통해 자세한 데이터를 확인이 가능하다.

활용할 식단 데이터는 codeNm (조-중-석식 구분), mealDate (식단 날짜), mealNm (식단 정보) 등으로 구성되어 있으며, 데이터 중 자신이 필요한 데이터를 파악해 js 코드를 작성해준다.

데이터 디테일

 

Header 센션의 'General - Request URL'에서 우리가 요청해와야 할 URL 주소를 확인할 수 있다.

요청 url를 분석해보면 파라미터로 startDt & endDt를 조절하면 데이터를 특정지어 받아올 수 있다.

요청 url 주소 확인

 

3 . postman을 통해 url를 get 요청하면 정상적으로 데이터 받아오는지 확인한다

uhmm~ it's perfect

! 여기서 잠깐 !

> request 헤더에 별도의 api-key 입력이 필요하다고 명시되어 있는 경우에, api 요청 코드 작성시 키값도 함께 전달해주어야 정상적인 요청 처리가 이루어진다. > postman을 활용해 데이터 요청 확인할 때 헤더 부분에 api 키값을 입력해 request 하면 된다.

 

4 . 프로젝트에 api 호출 코드 작성 및 사용하기

- service > mealAPI.js 의 코드

class MealAPI {
    constructor() {
        this.requestOptions = {
            method: 'GET',
            redirect: 'follow'
        };
    }

    async mealAPI() {
        const today = new Date();
        const dayAfter1Month = today.getMonth() + 1;

        const response = await fetch(`
       		https://api.pusan.ac.kr:8443/meal/sub?no=3&startDt=${today}&endDt=${dayAfter1Month}`,
            	this.requestOptions
        );
        const result = await response.json();
        return result;
    }
}

export default MealAPI;

 

전달해주는 파라미터(startDt & endDt) 값의 형식에 맞추어 전달해주어야하며, 그렇지 않을경우 별도의 js 코드로 매개변수 형식에 맞게 변환 후 전달해야 한다.

 

 

- mealAPI 호출 사용하는 코드

import React, { memo, useEffect, useState } from 'react';
import styles from './meals.module.css';

import MealAPI from '../../service/mealAPI'; // service 폴더 내부의 mealAPI 파일 import
const mealdata = new MealAPI(); // mealdata 변수 선언

const Meals = memo((props) => {
    const [meals, setMeals] = useState([]);
    
    useEffect(() => {
        mealdata.mealAPI().then(result => setMeals(result)) // mealdata의 mealAPI() 호출해 결과 전달
            .catch(error => console.log('error', error)); // 에러 점검
    }, []);

    return (
    	<div> 
            meals.map((meal) => { // 결과 출력
    		return <p> {meal.codeNm} {meal.mealDate} {meal.mealKindGcd} {meal.mealNm}</p> 
            })
        <div/>
     );
});

export default Meals;

api 호출 후 meals에 담긴 데이터 출력한 콘솔 결과

데이터 디테일

css 없이 받아온 날데이터 값 스크린에 확인한 모습

 

> css 및 디자인을 추가한 코드 및 결과

api 호출과 디자인 완성란 결과 화면

import React, { memo, useEffect, useState } from 'react';
import styles from './meals.module.css';
import Header from '../header/header';
import Meal from '../meal/meal';

import MealAPI from '../../service/mealAPI';
const mealdata = new MealAPI();

const Meals = memo((props) => {

    const [meals, setMeals] = useState([]);

    useEffect(() => {
        mealdata.mealAPI().then(result => setMeals(result))
            .catch(error => console.log('error', error));
    }, []);

    const result = meals.map((meal) => meal.mealDate);

    const meal = new Set(result);
    const mealDate = Array.from(meal);
    const week = ['일', '월', '화', '수', '목', '금', '토'];

    return (
        <>
            <Header />
            <ul className={styles.contanier}>
                <div className={styles.circle}></div>
                <p className={styles.title}>기숙사 식단표 🍚</p>
                <div className={styles.date}>
                    {mealDate.length !== 0 ?
                        mealDate.map((mealdate) => {
                            return (
                                <section className={styles.line}>
                                    <p className={styles.mealdate}>
                                        {mealdate}<br />
                                        {week[new Date(mealdate).getDay()]}
                                    </p>
                                </section>
                            )
                        }
                        ) : <p className={styles.noDataText}>연휴 및 방학 기간입니다 🎠</p>
                    }

                    <br /></div>
                <section className={styles.meals}>
                    {meals.map(meal => (
                        <Meal key={meal.mealDate + meal.mealKindGcd} meal={meal} mealDate={mealDate} />
                    ))}
                </section>
            </ul>
        </>
    )
});

export default Meals;

 

이제 api 호출에 대한 두려움없이 request 컬랙션 쌓아보러 고고 ~~!

 

Posted by Ang