기존 코드

먼저
import React, { useState, useEffect } from "react";
import axios from "axios";
import { SERVER_BASE_URL } from "../../config/constants";
로 필요한 것들을 import해온 뒤에


  const [shelter, setShelter] = useState([]);
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get(`${SERVER_BASE_URL}/shelter`);
        setShelter(response.data);
      } catch (err) {
        console.error(err);
      }
    };
    fetchData();
  }, []);

컴포넌트 안에 axios를 직접 해와서 return값 안에서 아래처럼 사용

{shelter.map((shelter)=> (
   <tr key={shelter.id}>
     <td className="gu-name">{shelter.guNm}</td>
     <td className="shelter-type">{shelter.shelterType}</td>
     <td className="shelter-address">{shelter.address}</td>
     <td className="shelter-qty">{shelter.qty}명</td>
   </tr>

변경 후 코드

api 폴더를 만들어서 그 안에서 관리

//📍api.js
import axios from "axios";
import { SERVER_BASE_URL } from "../config/constants";

export const api = axios.create({
  baseURL: SERVER_BASE_URL,
});

//📍fetchData.js
import { api } from "./api";

export async function fetchFire() {
  try {
    const { data } = await api.get("/fire");
    return data;
  } catch (err) {
    console.log("error: ", err);
  }
}

export async function fetchRain() {
  try {
    const { data } = await api.get(`/rain`);
    return data;
  } catch (err) {
    console.log("error: ", err);
  }
}

export async function fetchShelter() {
  try {
    const { data } = await api.get("/shelter");
    return data;
  } catch (err) {
    console.log("error: ", err);
  }
}

우리는 지금은 get밖에 안써서 한 파일 안에 써줬다.

그리고 hook폴더를 만들고 관리해준다.

//📍useFire.js
import { useState, useEffect } from "react";
import { fetchFire } from "../api";

export function useFire() {
  const [fire, setFire] = useState([]);

  async function _fetchFire() {
    try {
      const fire = await fetchFire();
      setFire(fire);
    } catch (err) {
      throw err;
    }
  }

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

  return { fire };
}

그리고 데이터가 필요한 컴포넌트 안에는 결국 한줄로 작성 가능하다.

//📍fireChart.js
import { useFire } from "../../hooks";
로 import해오고
 컴포넌트 안에는
const { fire } = useFire();
이렇게 한줄로만 작성

12줄을 1줄로 간결하게 사용할 수 있다!