마운트 시 데이터 가져오기
useEffect 안에서 API로부터 JSON을 가져오고 응답을 상태에 저장하며, 빈 의존성 배열로 가져오기를 한 번만 실행합니다.
마운트 시 데이터 가져오기은(는) CoddyKit의 무료 Frontend Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Frontend Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
데이터 가져오기 패턴
표준 React 데이터 가져오기 패턴은 다음과 같습니다. 1) 로딩, 오류, 데이터 상태를 정의합니다. 2) 빈 의존성 배열 []을 사용해 useEffect에서 데이터를 가져옵니다. 3) 콜백에서 상태를 업데이트합니다. 4) 상태에 따라 렌더링합니다.
전체 예제
마운트 시 사용자를 가져오고 로딩 및 오류를 처리하는 완전한 예제입니다.
interface User { id: number; name: string; email: string; }
function UserList() {
const [users, setUsers] = useState<User[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
fetch('/api/users')
.then(res => {
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return res.json();
})
.then(data => setUsers(data))
.catch(err => setError(err.message))
.finally(() => setLoading(false));
}, []);
if (loading) return <Spinner />;
if (error) return <ErrorMessage message={error} />;
return <ul>{users.map(u => <UserItem key={u.id} {...u} />)}</ul>;
}useEffect에서 async/await 사용하기
useEffect의 콜백은 직접 async로 만들 수 없습니다. 그러면 Promise를 반환하고 React가 이를 정리 함수로 해석하기 때문입니다. 대신 내부에 async 함수를 정의하고 즉시 호출하세요.
useEffect(() => {
async function fetchUsers() {
try {
const res = await fetch('/api/users');
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const data = await res.json();
setUsers(data);
} catch (err) {
setError((err as Error).message);
} finally {
setLoading(false);
}
}
fetchUsers();
}, []);응답 상태 확인하기
fetch는 HTTP 오류(4xx, 5xx)가 발생해도 예외를 던지지 않고 네트워크 오류가 있을 때만 던집니다. 항상 response.ok를 확인하고 오류 응답에는 직접 예외를 발생시키세요.
const res = await fetch('/api/data');
if (!res.ok) {
// Could also use res.status for specific handling
throw new Error(`Server responded ${res.status}: ${res.statusText}`);
}
const data = await res.json();의존성이 변경될 때 데이터 가져오기
라우트 매개변수나 속성에서 가져온 ID처럼 해당 의존성을 효과의 의존성 배열에 추가하세요. 의존성이 변경될 때마다 효과가 다시 실행되어 최신 데이터를 가져옵니다.
const { userId } = useParams();
useEffect(() => {
if (!userId) return;
setLoading(true);
fetch(`/api/users/${userId}`)
.then(r => r.json())
.then(setUser)
.finally(() => setLoading(false));
}, [userId]);효과에서 POST 요청 사용하기
효과는 POST/PUT/DELETE 요청도 보낼 수 있지만, 이러한 요청은 대개 마운트된 효과가 아니라 이벤트(양식 제출, 버튼 클릭)로 실행합니다. 효과는 데이터 로딩에 사용하고 변경 작업에는 이벤트 처리기를 사용하세요.
사용자 지정 useFetch 훅
데이터 가져오기, 로딩, 오류 처리 패턴을 사용자 지정 훅으로 추출하여 여러 구성 요소에서 재사용하세요.
function useFetch<T>(url: string) {
const [data, setData] = useState<T | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
setLoading(true);
fetch(url)
.then(r => { if (!r.ok) throw new Error(`${r.status}`); return r.json(); })
.then(setData)
.catch(e => setError(e.message))
.finally(() => setLoading(false));
}, [url]);
return { data, loading, error };
}JSON 안전하게 분석하기
항상 res.json()을 try/catch로 감싸세요. 형식이 잘못된 JSON은 SyntaxError를 발생시킵니다. 바깥쪽 catch가 이를 처리하지만, 발생 원인을 알면 디버깅에 도움이 됩니다.
API 기본 URL 구성
API URL을 코드에 직접 작성하지 마세요. 기본 URL에는 환경 변수(import.meta.env.VITE_API_URL)를 사용하세요. 구성된 데이터 요청 래퍼를 포함하는 중앙 api.ts 파일을 만드세요.
const API_BASE = import.meta.env.VITE_API_URL;
async function apiFetch<T>(path: string): Promise<T> {
const res = await fetch(`${API_BASE}${path}`, {
headers: { 'Authorization': `Bearer ${getToken()}` }
});
if (!res.ok) throw new Error(`API error ${res.status}`);
return res.json();
}React Query로 전환할 시점
수동 데이터 요청 패턴은 간단한 경우에 적합합니다. 캐싱, 백그라운드 다시 가져오기, 페이지 매김 또는 변경 작업이 필요하다면 React Query(TanStack Query)로 전환하세요. 이러한 패턴을 안정적으로 처리해 줍니다.
로딩 스켈레톤 표시하기
스피너 대신 로드된 콘텐츠의 형태와 일치하는 스켈레톤 화면을 표시하세요. 이렇게 하면 체감 로딩 시간이 줄어들고 레이아웃 이동을 방지할 수 있습니다.
빠른 확인
useEffect 콜백을 직접 async로 만들 수 없는 이유는 무엇인가요?
복습: useEffect에서 데이터 가져오기
로딩, 오류, 데이터 상태를 정의하세요. 빈 의존성 배열 []을 사용해 useEffect에서 데이터를 가져오세요. 내부 async 함수를 정의하고 콜백 자체를 async로 만들지 마세요. 항상 res.ok를 확인하세요. 동적으로 데이터를 가져오려면 URL 또는 ID를 의존성에 추가하세요. 재사용하려면 사용자 지정 useFetch 훅으로 추출하세요. 실제 서비스의 데이터 가져오기에는 TanStack Query를 고려하세요.
자주 묻는 질문
“마운트 시 데이터 가져오기” 강의는 무료인가요?
네 — “마운트 시 데이터 가져오기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Frontend Academy 강의 전체를 잠금 해제할 수 있습니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“마운트 시 데이터 가져오기”에서 뭘 배우나요?
useEffect 안에서 API로부터 JSON을 가져오고 응답을 상태에 저장하며, 빈 의존성 배열로 가져오기를 한 번만 실행합니다. 브라우저에서 직접 실행하는 실습 코드로 Frontend Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Frontend Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Frontend Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.
“마운트 시 데이터 가져오기” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Frontend Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Frontend Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.