리액트 라이브러리 Axios 오류 "Uncaught TypeError: Axios.post is not a function"

vlsxm·2022년 9월 30일
0

😈 React Axios TypeError

axios_WEBPACK_IMPORTED_MODULE_10__.Axios.post is not a function

Axios 라이브러리를 리액트를 사용하는중 이런 오류를 몇번씩 봤었지만
힘들게 오류를 해결하고 나중에 가서 또 잊어버리고 무한지옥에서 빠져나오지 못하는
저를 보면서 이번기회로 오류 해결 방법을 포스팅 하려고 합니다

일단 오류 로그를 보면 Axios의 post는 함수가 아니라고 합니다

나는 분명 Axios를 import를 했는데? 함수가 아니라니...

import { Axios } from "axios";

const submitPosting = () => {
    Axios.post('http://localhost:8080/abc', {
    }).then(() => {
        alert('등록 완료');
    })
}

(예시)이런 코드를 작성했는데요 역시 이유는 저에게 있었습니다

😇 해결 방법

import Axios from "axios";

Axios를 import 할때는 {}를 넣지 않아야 합니다

추측이지만 Axios는 default로 export 하는것 같아보입니다

리액트로 개발할때 IDE로 VScode를 사용하는데요
무심코 Axios를 import 하지 않고 그대로 코드에 작성후에 컨트롤 + 스페이스바를 눌러서
추가 하는 방법을 사용해서 이런 에러가 발생하게 되었네요

너무 자동완성 기능만 사용해서는 안될것같습니다

import Axios from "axios";

const submitPosting = () => {
    Axios.post('http://localhost:8080/abc', {
    }).then(() => {
        alert('등록 완료');
    })
}

이렇게 작성하면 오류 해결 완료!

profile
여러가지 하는 백엔드 개발자

0개의 댓글