Fetch — React: From Zero to hero — Part 33 (2024)
- Fetch는 JavaScript에서 제공되는 기본 API이며 비동기 HTTP 요청을 간편하게 처리하기 위한 프로미스 기반 API입니다. 📡
- 사용자 컴포넌트 처음 로드될 때 立刻 즉각적으로 호출되는 useEfffect Hook을 사용하여 데이터를 가져오는 기능을 구현할 수 있습니다. ⚡️
- fetch() 함수는 URL과 (선택사항) HTTP 메서드, 헤더 정보를 받아 API로부터 데이터를 가져와 JavaScript 객체로 변환하여 사용할 수 있도록 해줍니다. 🧰
- Fetch는 성공/실패 시 응답 코드와 데이터/에러 메시지를 반환하며, 이를 통해 애플리케이션 로직을 조정할 수 있습니다. 🚦
- 코드에 에러 처리 (catch)를 추가하여 예상치 못한 에러 상황 발생 시 안정적으로 애플리케이션을 실행할 수 있습니다. 🛡️
- asyn/await 키워드를 사용하여 비동기 작업을 병렬 실행하여 개발 흐름을 유지하고 코드 경직성을 줄일 수 있습니다. 🧵
- 효율적인 데이터 관리를 위해 fetch 결과를 상태 변수에 저장하고 업데이트하여 싱글 소스 오브 트루스 (SSOT)를 적용하는 것이 좋습니다. 🗃️