[React] api 연결

직접 접속했을 때

 

// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    include: ['axios']
  },
  server: {
    proxy: {
      '/atemos': {
        target: 'http://127.0.0.1:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/atemos/, '/atemos')
      }
    }
  }
})

 

// src/api.ts
import axios from 'axios';

const API_URL = '/atemos';

export const fetchData = async (endpoint: string) => {
  console.log("API_URL:", API_URL); // API_URL이 올바른지 확인
  console.log("Endpoint:", endpoint); // endpoint가 올바른지 확인

  try {
  const response = await axios.get(`${API_URL}${endpoint}`); 
    console.log(response);
    return response.data;
  } catch (error) {
    console.error('Error fetching data:', error);
    throw error;
  }
};

 

import {fetchData} from '../../api' // Axios를 이용한 API 호출 함수 가져오기

interface Company {
  id: number;
  name: string;
}

const SignUp: React.FC = () => {
  const [selectedOption, setSelectedOption] = useState<Company[]>([]);
  const [isOptionSelected, setIsOptionSelected] = useState<boolean>(false);

  const changeTextColor = () => {
    setIsOptionSelected(true);
  };

  useEffect(() => {
    const getCompanyList = async () => {
      try {
        // API 호출 예시: /company/list 엔드포인트를 호출하여 데이터 가져오기
        const data = await fetchData('/company/list');
        setSelectedOption(data.companyList); // 데이터를 selectedOption에 설정
        console.log('selectedOption :', selectedOption);
    
      } catch (error) {
        console.error('Error while logging in:', error);
        // 에러 처리
      }
    };

    getCompanyList(); // 함수 호출

  }, []); // 빈 배열을 전달하여 컴포넌트가 마운트될 때 한 번만 호출하도록 설정
  // 만약 특정 상태나 프롭이 변경될 때마다 호출하려면 해당 상태나 프롭을 배열에 추가하면 됩니다.