개요
웹 애플리케이션을 개발할 때 우리는 정기적으로 서버에서 호스팅되는 리소스에 액세스합니다. 리소스에 대한 요청, 전송 또는 기타 작업 수행은 HTTP 요청을 통해 수행됩니다. 이러한 요청은 클라이언트에서 서버의 호스트로 전송됩니다. HTTP 요청을 할 때 클라이언트는 다음을 사용합니다. URL(Uniform Resource Locator) 및 서버 리소스에 액세스하는 데 필요한 정보를 포함하는 페이로드를 포함합니다.
XNUMX가지 일반적인 HTTP 요청 방법은 다음과 같습니다. GET, PUT, POST, PATCH및 DELETE. 이러한 방법을 사용하면 표준 CRUD 작업을 수행할 수 있습니다.
이 기사에서는 Axios 또는 Fetch API를 사용하여 React에서 GET HTTP 요청을 만드는 방법과 클래스 및 기능 구성 요소 모두에서 그렇게 하는 방법을 배웁니다.
GET 요청이란 무엇입니까?
GET 서버에서 리소스를 가져오는 데 사용되는 HTTP 요청 방법입니다.
Axios 그리고 API 가져 오기 HTTP 요청을 만드는 두 가지 주요 방법입니다.
- Fetch API는 서버 또는 API 끝점에서 리소스를 검색하기 위한 기본 제공 약속 기반 JavaScript 모듈입니다.
- Axios는 REST 끝점에 비동기 HTTP 요청을 간단하게 보낼 수 있도록 하는 약속 기반 HTTP 클라이언트 라이브러리입니다. 설치해야 하는 외부 라이브러리입니다.
이 기사에서는 Fetch API와 Axios 메서드를 사용하여 React 기능 구성 요소에서 GET 요청을 수행하는 방법과 클래스 기반 구성 요소에서 동일한 작업을 수행하는 방법을 살펴보겠습니다.
React의 기능 구성요소에서 GET HTTP 요청을 수행하는 방법
기능 구성 요소는 JavaScript 함수(일반 또는 ES6)가 React 요소(JSX)를 반환할 때 생성됩니다. GET 요청을 수행할 때 매우 중요한 기능적 구성 요소로 작업할 때 React 후크를 사용합니다.
우리는 useState() 및 useEffect() 후크. 왜냐하면 useEffect() 후크는 앱이 마운트될 때 즉시 렌더링되며 앱 내에서 항상 GET 요청을 수행하고 useState() 데이터/응답을 저장하는 후크.
Fetch API를 사용하여 React의 기능 구성요소에서 GET HTTP 요청을 수행하는 방법
XNUMXD덴탈의 fetch() 메소드는 하나의 필수 인수(가져오려는 리소스의 URL)와 요청 메소드를 나타내는 선택적 인수를 허용합니다. 해당 선택적 인수의 기본값은 GET, 그래서 GET 요청을 할 때 설정할 필요가 없습니다.
그런 다음 Fetch API는 다음을 반환합니다. Promise, 그래서 우리는 사용할 수 있습니다 then() 및 catch() 성공 또는 실패를 처리하는 방법:
import { useState, useEffect } from 'react';
const App = () => {
const [posts, setPosts] = useState([]);
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/posts')
.then((res) => res.json())
.then((data) => {
console.log(data);
setPosts(data);
})
.catch((err) => {
console.log(err.message);
});
}, []);
return (
);
};
이것이 표준 GET 요청의 모습입니다. 이제 위의 코드를 더 잘 이해할 수 있도록 지금까지 수행한 작업을 분해해 보겠습니다. 우선, 우리는 우리가 가져올 모든 리소스/게시물을 보관할 상태를 만들었습니다. posts API :
const [posts, setPosts] = useState([]);
그런 다음 우리는 useEffect() 후크에 GET 요청을 작성하여 앱이 마운트된 직후 요청이 트리거되도록 합니다.
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/posts')
.then((res) => res.json())
.then((data) => {
console.log(data);
setPosts(data);
})
.catch((err) => {
console.log(err.message);
});
}, []);
그 후, 우리는 가져오기 요청을 생성했습니다. useEffect() 후크하고 서버에 액세스하는 데 사용할 수 있는 URL을 전달했습니다. 이것은 약속을 반환하기 때문에 우리는 다음을 사용했습니다. then() 방법. 이 메서드는 JSON이 아닌 응답 개체를 반환하기 때문에 먼저 데이터를 JSON 형식으로 변환했습니다.
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/posts')
.then((res) => res.json())
}, []);
그런 다음 게시물/데이터를 가져오고 이전에 만든 상태로 저장했습니다.
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/posts')
.then((res) => res.json())
.then((data) => {
console.log(data);
setPosts(data);
}
}, []);
마지막으로 우리는 catch() 오류 처리 방법:
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/posts')
.then((res) => res.json())
.then((data) => {
console.log(data);
setPosts(data);
})
.catch((err) => {
console.log(err.message);
});
}, []);
우리는 이미 GET 요청을 수행했고 우리가 생성한 상태로 데이터를 저장했습니다. 이제 React 애플리케이션 내에서 데이터를 사용할 수 있습니다.
Axios를 사용하여 React의 기능 구성요소에서 GET HTTP 요청을 수행하는 방법
Fetch API 외에도 Axios를 사용하여 GET 요청을 보낼 수도 있습니다. Axios REST 끝점에 비동기 HTTP 요청을 간단하게 보낼 수 있는 약속 기반 HTTP 클라이언트 라이브러리입니다.
외부 라이브러리인 Axios를 사용하려면 먼저 프로젝트 디렉토리에서 다음 명령을 실행하여 프로젝트에 설치해야 합니다.
$ npm install axios
Axios를 성공적으로 설치했으면 GET 요청을 수행할 수 있습니다.
import { useState, useEffect } from 'react';
import axios from 'axios';
const App = () => {
const [posts, setPosts] = useState([]);
useEffect(() => {
axios
.get('https://jsonplaceholder.typicode.com/posts?_limit=10')
.then((response) => {
setPosts(response.data);
})
.catch((err) => {
console.log(err);
});
}, []);
return (
);
};
모범 사례, 업계에서 인정하는 표준 및 포함된 치트 시트가 포함된 Git 학습에 대한 실습 가이드를 확인하십시오. 인터넷 검색 Git 명령을 중지하고 실제로 배움 이것!
이것은 Fetch API보다 훨씬 깔끔해 보입니다! 위의 코드를 살펴보면 우리가 설치한 외부 라이브러리인 Axios를 가져오는 것으로 시작했습니다.
import axios from 'axios';
그런 다음 내에서 GET 요청을 수행했습니다. useEffect() Fetch API에 대해 했던 것처럼 후크하지만 이번에는 구문이 약간 다릅니다.
useEffect(() => {
axios
.get('https://jsonplaceholder.typicode.com/posts?_limit=10')
.then((response) => {
setPosts(response.data);
})
.catch((err) => {
console.log(err);
});
}, []);
Fetch API 메서드와 달리 메서드를 선언하는 데 옵션이 필요하지 않습니다. 메서드를 인스턴스에 연결하고 쿼리하기만 하면 됩니다. 또한 데이터를 JSON으로 반환하기 때문에 데이터를 변환할 필요도 없습니다.
React의 클래스 구성 요소에서 GET HTTP 요청을 수행하는 방법
클래스 구성 요소는 JSX를 반환하고 React 확장을 사용해야 하는 ES6 클래스입니다. 후크가 도입되기 전에는 기능 구성 요소 내에서 상태를 사용할 수 없었기 때문에 이것이 가장 일반적으로 사용되는 방법(즉, 이전 버전 16.8)이었습니다.
후크를 사용할 수 있음에도 불구하고 많은 사람들이 계속해서 클래스 구성 요소를 사용합니다. 사용할 수 있는 방법을 알아보겠습니다. constructor() 메서드의 상태 속성 및 ComponentDidMount() 클래스 구성 요소를 사용하여 React에서 GET HTTP 요청을 수행하는 수명 주기 메서드입니다.
Fetch API를 사용하여 React의 클래스 구성 요소에서 GET HTTP 요청을 수행하는 방법
이것은 우리가 수행한 방법과 매우 유사합니다. GET 기능 구성 요소에서 요청합니다. 유일한 차이점은 이제 state 속성을 사용한다는 것입니다. constructor() 보다는 방법 useState() 훅. 또한, 우리는 우리의 GET 의 요청 ComponentDidMount() 수명주기보다 useEffect() 앱이 마운트되면 이 요청이 트리거됩니다.
import React, { Component } from 'react';
class App extends Component {
constructor(props) {
super(props);
this.state = {
posts: [],
};
}
componentDidMount() {
fetch('https://jsonplaceholder.typicode.com/posts')
.then((response) => response.json())
.then((data) => this.setState({ posts: data }))
.catch((error) => console.log(error));
}
render() {
const { posts } = this.state;
return (
);
}
}
위의 코드에서 생성자 메서드를 사용하여 서버/API에서 가져올 리소스/데이터를 저장하기 위해 개체의 상태를 초기화했습니다.
constructor(props) {
super(props);
this.state = {
posts: [],
};
}
그런 다음 GET 요청을 수행했습니다. componentDidMount() 앱이 마운트되면 트리거되도록 수명 주기 메서드:
componentDidMount() {
fetch('https://jsonplaceholder.typicode.com/posts')
.then((response) => response.json())
.then((data) => this.setState({ posts: data }))
.catch((error) => console.log(error));
}
state 많은 상태를 보유하는 객체이므로 먼저 구조를 분해하여 다음을 얻습니다. posts 나중에 사용할 수 있는 상태:
render() {
const { posts } = this.state;
return (
);
}
Axios를 사용하여 React의 클래스 구성 요소에서 GET HTTP 요청을 수행하는 방법
기능 구성 요소에서 본 것처럼 보낼 수 있습니다. GET Axios로 요청합니다. 남은 것은 실행하는 것뿐이다. GET 이내에 요청 ComponentDidMount() 수명 주기 및 Axios 가져오기:
import React, { Component } from 'react';
import axios from 'axios';
class App extends Component {
constructor(props) {
super(props);
this.state = {
posts: [],
};
}
componentDidMount() {
axios
.get('https://jsonplaceholder.typicode.com/posts')
.then((response) => {
this.setState({ posts: response.data });
})
.catch((error) => {
console.log(error);
});
}
render() {
const { posts } = this.state;
return (
);
}
}
결론
이 기사에서 가장 일반적으로 사용되는 두 가지 방법인 Fetch API와 Axios를 사용하여 기능 구성 요소와 클래스 구성 요소 모두에서 GET HTTP 요청을 수행하는 방법을 배웠습니다.
특정 방법을 사용하는 것은 전적으로 귀하에게 달려 있습니다.
