React 애플리케이션에서 HTTP 클라이언트 Axios 사용하기: 튜토리얼

Hark Labs2022-04-06 · 11 min read

React 애플리케이션에서 HTTP 클라이언트 Axios 사용하기: 튜토리얼

많은 웹 앱들이 개발 과정의 어느 시점에서 REST API와 인터페이스해야 하는 필요성에 직면합니다. React 기반 웹 앱의 경우, 우리는 Axios를 사용할 수 있습니다. 이는 $http 서비스(Angular.js v1.x 내)에 기반한 경량 HTTP 클라이언트입니다. 이 기능은 JavaScript’s 자체 Fetch API.

와 유사합니다. Axios는 프로미스(promise) 기반이므로 JavaScript’s async 및 await를 통합하여 더 읽기 쉬운 동기식 코드를 작성할 수 있습니다. 또한 인터셉트 및 요청 취소도 지원합니다. 게다가 크로스 사이트 요청 위조(CSRF)에 대한 클라이언트 측 보호 기능이 내장되어 있습니다.

이 가이드에서는 인기 있는 JSON Placeholder API에 액세스하기 위해 Axios를 사용하는 방법을 데모 React 애플리케이션에서 보여줍니다. 또한 이 튜토리얼에서 JavaScript의 JSON 형식에 대해 자세히 알아볼 수 있습니다.

사전 요구 사항

이 가이드에 설명된 단계를 완료하려면 다음 구성 요소가 필요합니다:

올바르게 구성된 Ubuntu 서버. 다음은 CloudSigma에서 자체 Ubuntu 서버를 설정하는 단계입니다.
설치된 최신 버전의 Node.js. Ubuntu에 Node.js를 설치하는 방법을 확인해 보세요.
을 사용한 새로운 React 프로젝트: Create React App. 먼저 이 Create React App을 사용하여 React 프로젝트를 설정하는 가이드를 따라하고 실행해 보는 것이 좋습니다.
에 대한 기본적인 이해: HTML, CSS, 그리고 JavaScrip t.

1단계: React 프로젝트에 Axios 설치하기

Axios는 npm 모듈로 직접 사용할 수 있습니다. npm의 Axios를 확인해 보세요. 필요한 것은 React 프로젝트를 생성하고 Axios 패키지를 설치하는 것뿐입니다.

다음 npx 명령은 create-react-app을 실행하여 새로운 React 프로젝트를 생성합니다. 프로젝트 이름은 프로젝트 전용 디렉터리를 생성하는 데 사용됩니다. 여기서는 프로젝트 이름을 react-axios-demo로 지정했습니다. 다음 명령을 실행하세요:

npx create-react-app react-axios-demo

1	npx create-react-app react-axios-demo

현재 디렉터리를 새로 생성된 프로젝트 디렉터리로 변경합니다:

cd react-axios-demo/

1	cd react-axios-demo/

다음으로, npm install 명령을 호출하여 Axios를 설치합니다. 버전을 지정하지 않으면 npm 이 자동으로 최신 버전의 Axios를 다운로드하고 설치합니다:

npm install axios

1	npm install axios

이제 프로젝트에서 Axios를 사용할 준비가 되었습니다! 이제 그 기능을 실제로 적용해 볼 시간입니다.

2단계: GET 요청 구성하기

이 단계에서는 Axios를 사용하여 GET 요청을 보내는 새 컴포넌트를 만드는 방법을 보여줍니다.

먼저, 이름 목록을 보여줄 새 컴포넌트인 PersonList를 생성합니다. 컴포넌트를 저장할 전용 디렉터리를 생성합니다:

mkdir -pv src/components

1	mkdir -pv src/components

다음으로, PersonList.js :

touch PersonList.js

1	touch PersonList.js

텍스트 에디터에서 파일을 엽니다. 편의성과 가독성을 위해 Visual Studio Code를 사용하고 있습니다. 다음 JavaScript 코드를 입력하세요:

import React from 'react';
import axios from 'axios';

export default class PersonList extends React.Component {
state = {
persons: []
}

componentDidMount() {
axios.get(`https://jsonplaceholder.typicode.com/users`)
.then(res => {
const persons = res.data;
this.setState({ persons });
})
}

render() {
return (
<ul>
{
this.state.persons
.map(person =>
<li key={person.id}>{person.name}</li>
)
}
</ul>
)
}
}

import React from 'react';

import axios from 'axios';

export default class PersonList extends React.Component {

state = {

persons: []

}

componentDidMount() {

axios.get(`https://jsonplaceholder.typicode.com/users`)

.then(res => {

const persons = res.data;

this.setState({ persons });

})

}

render() {

return (

<ul>

{

this.state.persons

.map(person =>

<li key={person.id}>{person.name}</li>

)

}

</ul>

)

}

설명:

컴포넌트에서 둘 다 사용할 수 있도록 React와 Axios를 임포트했습니다.
우리는 componentDidMount 라이프사이클 훅에 연결하여 GET 요청을 보냅니다.

API 엔드포인트에서 axios.get(<url>)을 사용하여 프로미스(응답 객체 반환)를 가져올 수 있습니다. 응답 객체 내에는 원하는 데이터가 포함되어 있습니다. 그런 다음 이를 person의 값으로 할당합니다. 또한 res.status 아래의 상태 코드나 res.request로부터의 추가 정보와 같이 요청에 대한 추가 정보를 수집할 수도 있습니다..

다음으로, 컴포넌트를 메인 App.js 파일에 추가해야 합니다. 다음 코드를 추가하세요:

import PersonList from './components/PersonList.js';

function App() {
return (
<div ClassName="App">
<PersonList/>
</div>
)
}

import PersonList from './components/PersonList.js';

function App() {

return (

</div>

)

}

이 단계의 설정이 완료되었습니다. 이제 앱을 실행하고 원하는 브라우저를 사용하여 테스트할 수 있습니다. 개발 서버를 시작하세요:

npm start

npm start

보시다시피, 출력 결과에 사람들의 이름 목록이 무작위 순서로 표시됩니다:

3단계: POST 요청 구성하기

이 섹션에서는 Axios를 사용하여 POST라 불리는 또 다른 HTTP 요청 메서드를 수행하는 방법을 보여드리겠습니다. 이를 시연하기 위해, React 프로젝트에 PersonAdd.

다음 파일을 생성하세요: PersonAdd.js:

touch src/components/PersonAdd.js

1	touch src/components/PersonAdd.js

그런 다음, 텍스트 에디터에서 파일을 열고 다음 코드를 입력하세요:

import React from 'react';
import axios from 'axios';

export default class PersonAdd extends React.Component {
state = {
name: ''
}
handleChange = event => {
this.setState({ name: event.target.value });
}
handleSubmit = event => {
event.preventDefault();
const user = {
name: this.state.name
};
axios.post(`https://jsonplaceholder.typicode.com/users`, { user })
.then(res => {
console.log(res);
console.log(res.data);
})
}
render() {
return (
<div>
<form onSubmit={this.handleSubmit}>
<label>
Person Name:
<input type="text" name="name" onChange={this.handleChange} />
</label>
<button type="submit">Add</button>
</form>
</div>
)
}
}

import React from 'react';

import axios from 'axios';

export default class PersonAdd extends React.Component {

state = {

name: ''

}

handleChange = event => {

this.setState({ name: event.target.value });

}

handleSubmit = event => {

event.preventDefault();

const user = {

name: this.state.name

};

axios.post(`https://jsonplaceholder.typicode.com/users`, { user })

.then(res => {

console.log(res);

console.log(res.data);

})

}

render() {

return (

<div>

<label>

Person Name:

</label>

</form>

</div>

)

}

이 코드에서는 사용자 입력을 받아 그 내용을 API에 POST합니다. handleSubmit 함수 내부에서 폼의 기본 동작을 방지하고 상태를 사용자 입력으로 업데이트합니다. POST를 사용할 때는 동일한 응답 객체가 반환됩니다. 이 객체는 then 호출 내부에서 사용할 수 있습니다. POST 요청을 완료하기 위해, 사용자 입력을 캡처하여 POST 요청과 함께 추가합니다. 그러면 응답을 받게 됩니다. 이 응답을 console.log을 사용하여 기록합니다. 그러면 폼에 user 입력이 표시될 것입니다.

다음으로, 컴포넌트를 App.js에 추가합니다. 전체 코드는 다음과 같습니다:

import PersonList from './components/PersonList';
import PersonAdd from './components/PersonAdd';

function App() {
return (
<div ClassName="App">
<PersonAdd/>
<PersonList/>
</div>
)
}

import PersonList from './components/PersonList';

import PersonAdd from './components/PersonAdd';

function App() {

return (

</div>

)

}

이제 변경 사항을 테스트할 시간입니다. 개발 서버를 시작하세요:

npm start

npm start

웹 브라우저에서 변경 사항을 확인하세요:

4단계: DELETE 요청 구성하기

이 섹션에서는 axios.delete의 도움을 받아 URL을 매개변수로 사용하여 API에서 항목을 삭제하는 방법을 보여드리겠습니다. 이를 시연하기 위해 PersonRemove 컴포넌트를 생성합니다. PersonRemove.js 파일을 src/components 디렉터리에 생성하세요:

touch src/components/PersonRemove.js

1	touch src/components/PersonRemove.js

그 후, 텍스트 에디터에서 파일을 열고 다음 코드를 추가하세요:

import React from 'react';
import axios from 'axios';

export default class PersonRemove extends React.Component {
state = {
id: ''
}

handleChange = event => {
this.setState({ id: event.target.value });
}

handleSubmit = event => {
event.preventDefault();
axios.delete(`https://jsonplaceholder.typicode.com/users/${this.state.id}`)
.then(res => {
console.log(res);
console.log(res.data);
})
}

render() {
return (
<div>
<form onSubmit={this.handleSubmit}>
<label>
사용자 ID:
<input type="number" name="id" onChange={this.handleChange} />
</label>
<button type="submit">삭제</button>
</form>
</div>
)
}
}

import React from 'react';

import axios from 'axios';

export default class PersonRemove extends React.Component {

state = {

id: ''

}

handleChange = event => {

this.setState({ id: event.target.value });

}

handleSubmit = event => {

event.preventDefault();

axios.delete(`https://jsonplaceholder.typicode.com/users/${this.state.id}`)

.then(res => {

console.log(res);

console.log(res.data);

})

}

render() {

return (

<div>

<label>

사용자 ID:

</label>

</form>

</div>

)

}

여기서 res 객체는 요청에 대한 정보를 제공합니다. 그런 다음 console.log을 폼이 제출된 후에 사용할 수 있습니다.

다음으로, 컴포넌트를 App.js:

import PersonList from './components/PersonList';
import PersonAdd from './components/PersonAdd';
import PersonRemove from './components/PersonRemove';

function App() {
return (
<div ClassName="App">
<PersonAdd/>
<PersonList/>
<PersonRemove/>
</div>
)
}

import PersonList from './components/PersonList';

import PersonAdd from './components/PersonAdd';

import PersonRemove from './components/PersonRemove';

function App() {

return (

</div>

)

}

코드를 다시 테스트할 시간입니다. 서버를 시작하세요:

npm start

npm start

사용자의 이름을 입력받아 목록에서 제거하는 새로운 폼을 볼 수 있습니다:

5단계: Axios에서 기본 인스턴스 적용하기

이제 Axios 기본 인스턴스를 사용해 보겠습니다. 여기서 URL 및 기타 구성 요소를 정의할 수 있습니다. 이를 구현하려면 별도의 파일 api.js:

touch src/api.js

1	touch src/api.js

텍스트 에디터에서 이 파일을 열고 다음 코드를 입력합니다:

import axios from 'axios';

export default axios.create({
baseURL: `http://jsonplaceholder.typicode.com/`
});

import axios from 'axios';

export default axios.create({

baseURL: `http://jsonplaceholder.typicode.com/`

});

설정이 완료되면, 이를 PersonRemove 컴포넌트 내부에서 사용할 수 있습니다. 코드는 다음과 같습니다:

import React from 'react';
import API from '../api';

export default class PersonRemove extends React.Component {
handleSubmit = event => {
event.preventDefault();
API.delete(`users/${this.state.id}`)
.then(res => {
console.log(res);
console.log(res.data);
})
}
}

import React from 'react';

import API from '../api';

export default class PersonRemove extends React.Component {

handleSubmit = event => {

event.preventDefault();

API.delete(`users/${this.state.id}`)

.then(res => {

console.log(res);

console.log(res.data);

})

}

여기서 http://jsonplaceholder.typicode.com/이 기본 URL로 설정됩니다. 이제 API 엔드포인트에 접근할 때마다 전체 URL을 사용할 필요가 없습니다.

6단계: async 및 await 구현하기

이 섹션에서는 async 및 await를 프로미스와 함께 작동하도록 구현하는 방법을 살펴보겠습니다. await 키워드는 promise를 해결하고 value를 반환합니다. 이 value를 변수에 할당하여 더 편리하게 사용할 수 있습니다.

업데이트된 PersonRemove.js의 코드는 다음과 같습니다:

import React from 'react';
import API from '../api';

export default class PersonRemove extends React.Component {
handleSubmit = event => {
event.preventDefault();
const response = await API.delete(`users/${this.state.id}`);
console.log(response);
console.log(response.data);
}
}

import React from 'react';

import API from '../api';

export default class PersonRemove extends React.Component {

handleSubmit = event => {

event.preventDefault();

const response = await API.delete(`users/${this.state.id}`);

console.log(response);

console.log(response.data);

}

여기서 우리는 다음을 대체했습니다: .then(). 일단 프로미스가 해결되면, 값을 다음 변수에 저장합니다: response.

마치며

이 튜토리얼에서는 REST API와 함께 Axios를 사용하는 다양한 예제를 살펴보았습니다. 이 코드는 HTTP 요청을 생성하고 응답을 처리하는 방법을 보여줍니다.

JavaScript에 대해 더 자세히 배우고 싶으신가요? 다양한 JavaScript 개념과 기능에 대한 다른 초보자 가이드를 확인해 보세요. 예를 들어, 날짜와 시간, 문자열 조작, 클래스, 그리고 객체.

즐거운 코딩 하세요!

Hark Labs

작성자 · CloudSigma

Preslav Dobrev는 CloudSigma의 크리에이티브 디자이너로서, 전통적이고 혁신적인 마케팅 채널을 활용하여 일관된 비즈니스 정체성을 구축하는 데 중점을 두고 있습니다. 그는 영향력 있는 브랜드 내러티브를 창출하기 위해 예술적 비전과 전략적 마케팅을 결합하는 데 능숙합니다.

React 애플리케이션에서 HTTP 클라이언트 Axios 사용하기: 튜토리얼

사전 요구 사항

1단계: React 프로젝트에 Axios 설치하기

2단계: GET 요청 구성하기

3단계: POST 요청 구성하기

4단계: DELETE 요청 구성하기

5단계: Axios에서 기본 인스턴스 적용하기

6단계: async 및 await 구현하기

마치며

Hark Labs

댓글