리액트 axios란? axios 사용하기. Node.js 모듈 axios란?

리액트 axios란? axios 사용하기. Node.js axios란?

 

 

Axios는 npm을 이용하여 다운로드 가능한 HTTP request 모듈 혹은 라이브러리입니다.

이는 ES6 Promise API를 지원하며 Node.js 혹은 브라우저의 HTTP request에 사용됩니다.

오늘은 가볍게 사용 방법을 알아보도록 하겠습니다.

ES6 전 비동기식 처리를 하려면 콜백 지옥이 따로 없었습니다. 

함수 안에 함수 또 함수를 불러와 코드는 지저분하고 길며 피라미드가 쌓이기 십상이었습니다.

하지만 ES6로 넘어오면서 이러한 모습은 then이라는 키워드로 깔끔하게 정리됩니다.

혹은 aync, await으로 사용하는 것도 가능합니다.

다행히 axios는 이러한 ES6를 호환하기에, 크게 어렵지 않게 HTTP request를 할 수 있습니다.

그럼 오늘도 아주 쉽고 간단하게 몇 가지 알아보도록 하겠습니다.

 

목차.

1. axios 설치방법.
2. axios 사용방법.
3. 마치며.

 

 

1. axios 설치방법.

 

우리는 예전 시간에 리액트를 사용하기 위해서 Node.js를 설치해야 한다는 것을 배웠습니다.

그 이유는 npm이 필요하기 때문입니다.

 

그에 대한 설명은 아래의 링크를 통해 가볍게 확인 가능합니다.

https://ko-de-dev-green.tistory.com/29

Node.js npm 이란 무엇인가?

Npm은 Node Package Manager의 줄임말로 즉 Node.js에 필요한 패키지를 관리할 수 있도록 도와줍니다.

즉 리액트를 이용하려면 npm으로 리액트 모듈을 설치, 사용할 수 있다는 뜻입니다.

Axios 역시 동일합니다. 이를 이용하기 위해서는 npm으로부터 axios 모듈을 설치하여야 합니다.

걱정하지 마세요. 설치방법은 아주 간단합니다.

 

설치방법은 아래와 같습니다. (윈도를 기준으로 설명드리겠습니다.)

 

1. cmd를 열어주세요.(VSCode에서 터미널 탭을 이용하여 cmd를 열 수 있습니다.)
2. cmd에서 파일 경로를 리액트 프로젝트에 맞춰주세요.
3. npm i axios라고 cmd에 입력 후 실행해주세요.(자동으로 설치가 진행됩니다.)
4. 설치가 완료되었다면 HTTP request가 필요한 컴포넌트 혹은 컨테이너 파일을 열어주세요.
5. 그 후 아래와 같이 입력해주세요. (대소문자를 구분해주세요. 가끔 에러를 야기합니다.)

import axios from 'axios';

 

자 이렇게 컴포넌트에 import 하였다면 설치방법은 끝입니다.

이제는 간단한 사용방법을 알아보도록 하겠습니다.

 

 

 

2. axios 사용방법.

 

이제 사용방법을 알아보겠습니다.

이 또한 아주 간단합니다. 

 

axios는 여러 가지 기능들이 많습니다.

하지만 가장 대표적으로 많이 사용되는 것은 대략 2가지 정도이지 않을까 싶습니다.

get과 post입니다.

 

get은 말 그대로 API를 통해 정보를 받아오는 것을 의미합니다.

 

가볍게 예시를 알아볼까요?

 

import React, {useEffect} from 'react';
import axios from 'axios';

const App = () => {

    useEffect(() => {
    	axiosTest();
    })

    const axiosTest = () => {
    	axios.get("이곳에 api를 입력해주세요.")
        .then(res => console.log(res.data)
        .catch(err => console.log(err));
    }
	
    
    return <p>hello</p>
}

export default App;

 

자 이렇게 쉽게 데이터를 받아 올 수 있습니다.

. then이라는 키워드를 이용하여 비 동식 처리를 하고 있습니다.

즉 먼저. get으로 지정된 API에서 정보를 가져옵니다. 그 뒤(then) 정보를 로그로 보여줍니다.

하지만 api가 잘못되거나 인터넷이 불안정하거나 연결되지 않았다면 혹은 그 외의 다른 이유로

에러가 발생한다면 곧바로 catch로 넘어가 에러를 표시할 것입니다.

예외처리는 생각보다 중요합니다. 후에 이에 관한 게시글도 따로 만들 수 있도록 해보겠습니다.

 

이를 통해 당연히 useState를 이용하여 결괏값을 저장하는 것도 가능합니다.

 

자 그럼 이번에는 post를 알아보도록 하겠습니다.

이 또한 큰 차이는 없습니다. 단지 get과 반대로 정보를 보내는 것이기에,

내가 보낼 정보를 지정해주어야 한다는 것입니다.

 

 

import React, {useEffect} from 'react';
import axios from 'axios';

const App = () => {

	useEffect(() => {
    	axiosTest();
    })
    
    const axiosTest = () => {
        axios.post("이곳에 api를 입력해주세요.", "이곳에 보낼 값을 입력해주세요.")
        .then(res => console.log(res.data)
        .catch(err => console.log(err));
    }
	
    
    return <p>hello</p>
}

export default App;

 

자 어떤가요? 단지 api를 입력한 뒤 추가적인 값을 입력하기만 하면 됩니다.

그렇다면 여기서 res.data는 어떤 값일까요? 제가 보낸 값이 다시 오는 것일까요??

아닙니다.

동작 방식은 이렇습니다.

 

axios를 통해 서버로 값을 post 합니다.

서버는 이를 받아들인 뒤 어떠한 동작을 수행할 것입니다.

동작은 당연히 서버가 어떻게 처리하느냐에 따라 단순히 DB에 저장할 수도

혹은 로그인 처리, 값 수정 등등 다양할 것입니다.

서버는 필요한 동작을 수행한 뒤 마지막에 결괏값을 다시 보낼 수 있습니다.

그리고 그 결괏값은 res.data로 나타날 것입니다.

 

예를 들어 로그인을 하는 상황입니다.

로그인에 성공하면 "로그인 성공"이라는 텍스트를

실패하면 "로그인 실패"라는 텍스트를 서버는 결과로 알려줍니다.

자 유저는 아이디와 비밀번호를 입력 후 로그인 버튼을 누릅니다.

버튼을 누름과 동시에 axios의 post에 정해진 경로로 

유저의 아이디와 비밀번호가 서버로 전송됩니다.

서버는 로그인을 위한 동작을 수행할 것입니다.

예를 들면 먼저 아이디 존재 유무를 확인하고,

존재한다면 유저의 비밀번호와 해쉬 된 비밀번호를 비교합니다.

그리고 비밀번호마저 정확하다면 결괏값인 "로그인 성공"을 보내고

유저가 존재하지 않거나 비밀번호가 다르다면 "로그인 실패"를 보냅니다.

그럼 axios는 결괏값을(즉 로그인 성공 혹은 로그인 실패) 기다린 뒤 서버가 전달해 준 결과값을 res.data로 

다시 유저에게 보내고 결과적으로 유저는 그에 대한 결과를 확인 가능한 것입니다.

 

 

3. 마치며.

 

꼭 모듈을 사용해야 할까요?

그렇지는 않겠죠. 하지만 모듈을 사용하면 여러모로 시간 절약, 보안 강화, 깔끔한 코드, 쉬운 사용 등

아주 많은 장점들이 존재합니다.

예를 들어 Carousel을 하나 만들어야 하는데, 이를 직접 만들면 버그도 발생할 것이고,

그에 관한 버그를 수정하느라 시간도 많이 걸릴 것입니다.

하지만 모듈을 사용한다면 시간을 절약하고 내가 필요한 기능들만 딱딱 가져와 

손쉽게 이용 가능할 것입니다. 당연히 코드 또한 가독성이 높아질 것입니다.

하지만 당연히 모듈 그 자체에 버그, 혹은 에러가 존재한다면,

우리는 모듈을 개발한 개발자가 버그, 에러를 수정할 때까지 기다려야 하는 단점이 있습니다.

모든 일에는 장점과 단점이 존재하는 것 같습니다.

하지만 당연히 좀 더 모던하게 코드를 작성하려면 개인적으로 모듈을 사용할 줄 알아야 된다고 생각합니다.

하지만 이는 어느 정도 모듈 없이 스스로 필요한 기능을 만들 수 있어야 한다는 게 전제된다고 생각합니다.

모듈을 사용하는 것은 좋으나 어떻게 이러한 기능을 만들 수 있을지는 스스로 연구해본다면

정말 큰 도움이 됩니다. 또한 모듈을 사용하는것은 좋으나 의존하면 자신 스스로의 실력 향상에 방해가 되지 않을까

하는 생각도 합니다. 그러하여 제가 아우스빌둥을 시작할 때 가장 많이 받은 과제가

혼자서 아무런 모듈 혹은 라이브러리 없이 복잡한 홈페이지 자체를 클론으로 만드는 것이었습니다.

정말 오직 바닐라로만 말이죠. 그 뒤로 정말 실력도 많이 향상되었고, 후에 모듈을 사용했을 때

모듈 사용의 필요성을 좀 더 느끼게 되었습니다.

 

또한 이러한 HTTP request를 도와주는 모듈은 axios 말고도 많습니다.

가능하면 자신에게 맞거나 당장 프로젝트에 좀 더 도움이 되는 모듈을 사용하는 것이 좋다고 생각합니다.

 

항상 가장 처음이 힘들고 무서운 법입니다.

하지만 모두 이겨내고 나아가는 건 스스로 해야 하는 일이지요.

좋은 아이디어를 생각하는 것 말고 좋은 아이디어를 행동으로 만드는 여러분이 되었으면 합니다.

다 같이 힘냅시다!!

 

완벽한 준비란 없다, 완벽한 준비란 영원히 시작하지 않는 것과 같다.

Es gibt keine perfekte Vorbereitung.

Perfekte Vorbereitung ist das Gleiche, wie nie anzufangen.