React 치트 코드에서 데이터 가져오기
1) fetch api를 사용하여 데이터를 가져옵니다.
import { useState, useEffect } from 'react';
const url = 'https://course-api.com/react-tours-project';
function App() {
const [tours, settours] = useState([])
const [loading, setloading] = useState(true)
// fetching data
useEffect(() => {
fetch(url)
.then(response => {
if(response.ok){
return response.json()
}
throw response;
})
.then(tours => {
settours(tours);
})
.catch(error => {
console.error("Error Fetching",error);
})
.finally(()=>{
setloading(false)
})
}, [])
if(loading){
return(
<main>
<Loading/>
</main>
)
}
return (
<div className="App">
<Tours/>
</div>
);
}
export default App;
2) Axios 사용.
먼저 이 명령을 사용하여 axios를 설치하십시오. "npm install axios
"
import { useState, useEffect } from 'react';
const url = 'https://course-api.com/react-tours-project';
function App() {
const [tours, settours] = useState([])
const [loading, setloading] = useState(true)
// fetching data
useEffect(() => {
axios(url)
.then(response =>{
settours(response.tours)
})
.catch(error => {
console.error("Error Fetching",error);
})
.finally(() => {
setloading(false)
})
}, [])
if(loading){
return(
<main>
<Loading/>
</main>
)
}
return (
<div className="App">
<Tours/>
</div>
);
}
export default App;
2) async/await 사용
import { useState, useEffect } from 'react';
const url = 'https://course-api.com/react-tours-project';
function App() {
const [tours, settours] = useState([])
const [loading, setloading] = useState(true)
// fetching data
const fetchTours = async () => {
setloading(true)
try{
const response = await fetch(url)
const tours = await response.json()
setloading(false)
settours(tours)
}catch(error){
setloading(false)
console.log(error)
}
}
useEffect(() => {
fetchTours()
}, [])
if(loading){
return(
<main>
<Loading/>
</main>
)
}
return (
<div className="App">
<Tours/>
</div>
);
}
export default App;
Reference
이 문제에 관하여(React 치트 코드에서 데이터 가져오기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/mubasshir00/fetch-data-in-react-cheat-code-1g45텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)