18-1. Fetch async await
/* fetch api 사용법
const promise = fetch(url, [options]);
url : 접근하고자 하는 url
options : 선택 매개변수로 method나 header 등을 지정
options에 아무 값도 넣지 않으면 GET 메소드로 요청 */
/* fetch api를 그냥 호출하면 promise를 반환한다. */
const promise = fetch('https://jsonplaceholder.typicode.com/users');
console.table(promise);
/* PromiseResult는 접근 불가 */
console.log(promise['[[PromiseResult]]']);
/* await를 이용하여 호출하면 응답 객체를 반환한다. */
const response = await fetch('https://jsonplaceholder.typicode.com/users');
console.table(response);
console.log(`본문 사용 여부 : ${response.bodyUsed}`);
/* response body를 문자열 형태로 반환 */
// const responseText = await response.text();
// console.log(responseText);
// console.log(`본문 사용 여부 : ${response.bodyUsed}`);
/* response body를 자바스크립트 객체 형태로 반환
한 번 본문을 사용하면 다시 사용할 수 없으므로 위의 코드는 주석하고 작성 */
const json = await response.json();
console.log(json);
}
function App(){
const onClickHandler = () => { callAPI(); };
return <button
onClick = {onClickHandler}> API 요청</button>
}
ReactDOM.createRoot(document.getElementById('root')).render(<App/>)React에서 fetchAPI를 사용하는 것은 서버에서 데이터를 가져오거나 보내기 위한 일반적인 방법 중 하나입니다. fetchAPI는 네트워크 요청을 수행하고 응답을 처리하는 기능을 제공합니다.
fetchAPI는 브라우저 내장 API로, Promise를 반환합니다. fetch 메소드를 사용하여 HTTP 요청을 보내고, then 메소드를 사용하여 응답 데이터를 처리합니다.
예를 들어, 아래 코드는 fetchAPI를 사용하여 JSON 데이터를 가져오는 예시입니다.
fetch('https://example.com/data.json')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error))이 코드는 'https://example.com/data.json'에서 JSON 데이터를 가져와서 응답을 처리합니다. 첫 번째 then 메소드에서는 응답 데이터를 JSON으로 파싱하고 두 번째 then 메소드에서는 파싱된 데이터를 콘솔에 출력합니다. 마지막으로 catch 메소드에서는 오류가 발생한 경우 오류를 콘솔에 출력합니다.
fetchAPI를 사용하여 데이터를 가져온 후 React에서 이를 사용하여 컴포넌트를 업데이트하거나 상태를 변경할 수 있습니다. 이것은 React에서 데이터를 가져오고 표시하는 일반적인 패턴 중 하나입니다.
18-2. Fetch Then
function callAPI(){
fetch('https://jsonplaceholder.typicode.com/users')
.then(response => response.json())
.then(data => console.log(data));
}
function App(){
const onClickHandler = () => { callAPI(); };
return <button
onClick = {onClickHandler}> API 요청</button>
}
ReactDOM.createRoot(document.getElementById('root')).render(<App/>)18-3. axios
/* axios 라이브러리는 데이터 변환 처리를 내부적으로 해주기 때문에 조금 더 간편하게 사용할 수 있다.
-> 라이브러리 추가 필요 */
axios.get('https://jsonplaceholder.typicode.com/users')
.then(res => console.log(res.data))
.catch(err => console.log(err));
}
function App(){
const onClickHandler = () => { callAPI(); };
return <button
onClick = {onClickHandler}> API 요청</button>
}
ReactDOM.createRoot(document.getElementById('root')).render(<App/>)axios는 Promise 기반의 HTTP 클라이언트 라이브러리로, 브라우저와 Node.js에서 모두 사용할 수 있습니다. fetchAPI와 마찬가지로 HTTP 요청을 보내고 응답을 처리하는 기능을 제공합니다.
axios는 fetchAPI와 달리 JSON 데이터를 자동으로 파싱해줍니다. 또한, 요청과 응답을 인터셉트하고 수정하는 기능, 요청 취소와 타임아웃 설정, HTTP 인증 등 다양한 기능을 제공합니다.
axios를 사용하여 데이터를 가져오는 예시는 아래와 같습니다.
Copy code
import axios from 'axios';
axios.get('https://example.com/data.json')
.then(response => console.log(response.data))
.catch(error => console.error(error))이 코드는 axios를 사용하여 'https://example.com/data.json'에서 데이터를 가져옵니다. 응답 데이터는 response 객체의 data 속성에 저장되어 있으며, 이를 콘솔에 출력합니다. 마찬가지로, 오류가 발생한 경우 catch 메소드에서 오류를 콘솔에 출력합니다.
axios를 사용하여 HTTP 요청을 보내고 응답을 처리하는 것은 fetchAPI와 매우 유사합니다. 그러나 axios는 더 많은 기능과 편의성을 제공하므로, 일반적으로 axios를 사용하여 HTTP 요청을 처리하는 것이 더 편리합니다.
