[React] 커스텀 훅(Custom Hook)
·
Programming/React
이 글은 Udemy의 【한글자막】 React 완벽 가이드 2025 with React Router & Redux 를 수강하고 정리한 내용입니다. React를 사용하다 보면 컴포넌트마다 비슷한 로직이 반복되는 경우가 많습니다.예를 들어, 데이터를 가져오기 위해 useEffect 안에서 fetch 요청을 보내고, loading 상태와 error 상태를 관리하는 코드를 여러 컴포넌트에서 반복하게 되기도 합니다.이럴 때 유용하게 사용할 수 있는 것이 바로 "커스텀 훅(Custom Hook)" 입니다. 🎈 먼저, 리액트 훅의 두 가지 규칙부터 다시 복습!리액트 훅은 컴포넌트 함수 또는 다른 훅 안에서만 사용 가능일반 함수에서는 사용 불가능합니다.훅은 조건문, 반복문, 중첩 함수 안에서 호출하면 안 됨 🎈 커스..
[React] HTTP 통신 : fetch로 데이터 요청하고 로딩/에러 처리까지
·
Programming/React
이 글은 Udemy의 【한글자막】 React 완벽 가이드 2025 with React Router & Redux 를 수강하고 정리한 내용입니다. 이번 글에서는 React에서 HTTP 요청을 다루는 데 사용되는 기본적인 fetch API와 이를 어떻게 효율적으로 처리할 수 있는지에 대해 알아보겠습니다. 특히, 로딩 상태와 에러 처리를 어떻게 관리하는지를 다룰 예정입니다. ✅ 기본 fetch API 사용법 (GET 요청)1. fetch + .then() 사용useEffect(() => { fetch('') .then((response) => response.json()) .then((resData) => setAvailablePlaces(resData.places));}, []);response..