[실무] 04. 라우터 + json-server + useEffect(fetch)

React JS 실무

React 입문 (4) — 라우터 + json-server + useEffect(fetch): 데이터 붙이기

페이지 전환(react-router-dom)과 로컬 API(json-server), 그리고 useEffect로 데이터 로딩하는 패턴을 정리합니다.

범위 기초+실습 핵심 Router·API 패턴 useEffect

라우팅과 API 연동 흐름(개념도)

1) 라우터: URL에 따라 “보여줄 화면”을 바꿉니다

SPA에서 라우터는 필수에 가깝습니다. 화면을 페이지처럼 나누되, 실제 페이지 새로고침 없이 전환합니다.

npm install react-router-dom

import {{ BrowserRouter, Routes, Route }} from "react-router-dom";

export default function App() {{
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={{<Home />}} />
        <Route path="/day/:id" element={{<Detail />}} />
      </Routes>
    </BrowserRouter>
  );
}}

2) json-server: 로컬에서 REST API를 “흉내”내기

백엔드가 아직 없을 때 json-server를 쓰면 프론트 개발을 빠르게 진행할 수 있습니다.

npm install -g json-server
json-server --watch db.json --port 3001

실무 팁
포트는 프로젝트와 충돌하지 않도록 3001/4000 등으로 분리해 주세요.

3) useEffect + fetch: “처음 로딩할 때” 데이터 가져오기

import {{ useEffect, useState }} from "react";

export default function DayList() {{
  const [days, setDays] = useState([]);

  useEffect(() => {{
    fetch("http://localhost:3001/days")
      .then(res => res.json())
      .then(data => setDays(data));
  }}, []);

  return (
    <ul>
      {{days.map(d => <li key={{d.id}}>{{d.title}}</li>)}}
    </ul>
  );
}}

체크 포인트

• 의존성 배열 []은 “최초 1회” 실행을 의미합니다.
• 에러 처리/로딩 표시를 함께 넣으면 사용자 경험이 좋아집니다.

운영 관점 체크

• API 응답이 느릴 때를 대비해 로딩 UI를 준비해 주세요.
• 실서비스에서는 base URL을 환경변수로 분리하는 편이 안전합니다.

참고 링크

• React Router 문서
• json-server GitHub
• React: useEffect
• MDN: fetch()
• DoLearn 커리큘럼(강의 목록)