Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
Tags
- 동적계획법
- reduxtoolkit
- 리액트
- tailwind
- Supabase
- 타입스크립트
- Form
- 리덕스
- React Query
- 토이프로젝트
- 코테
- React
- 프론트엔드
- 코딩테스트
- 프로그래머스
- TypeScript
- revalidatepath
- JavaScript
- 코어자바스크립트
- react router dom
- 자바스크립트
- 그리디
- Next.js
- styled component
- 토이 프로젝트
- 리액트 라우터 돔
- 리액트 패턴
- tanstack query
- react pattern
- 스택
Archives
- Today
- Total
느려도 한걸음씩
React로 HTTP 요청 보내기 - (2) 본문
저번 게시물에서는 fetch로 데이터를 받아보았다 이번에는 async await를 이용해 좀더 간결하게 데이터를 가져와보자
useEffect(() => {
async function fetchPlaces() {
}
}, []);
}
먼저 useEffect안에 async 함수를 선언한다
useEffect(() => {
async function fetchPlaces() {
const response = await fetch("http://localhost:5000/places");
const resData = await response.json();
setAvailablePlaces(resData.places);
}
}, []);
후에 await 키워드를 붙여 data를 fething하고 state에 저장한다
useEffect(() => {
async function fetchPlaces() {
const response = await fetch("http://localhost:5000/places");
const resData = await response.json();
setAvailablePlaces(resData.places);
}
fetchPlaces();
}, []);
그 후에 선언했던 함수를 밑에서 실행해주면 된다
'FE develop > React' 카테고리의 다른 글
React로 HTTP 요청 보내기 - (4) (0) | 2025.03.12 |
---|---|
React로 HTTP 요청 보내기 - (3) (0) | 2025.03.12 |
React로 HTTP 요청 보내기 - (1) (0) | 2025.03.12 |
children props로 재사용 가능한 컴포넌트 만들기 (0) | 2024.12.06 |
조건부 렌더링(Conditional Rendering) (1) | 2024.12.03 |