이 글은 2026년 3월 17일 작성된 글입니다.
오늘은 React에서 React Router를 활용한 페이지 라우팅,
Dummy JSON API를 활용한 더미 데이터 실습,
그리고 REST API 요청 방식(GET / POST / PUT / DELETE)을 활용하여 Todo 데이터를 관리하는 실습을 진행하였다.
또한 이전에 진행했던 Vanilla JavaScript 기반 Todo App 구현 과정도 함께 정리하였다.
1. React Router 기본 구조
React에서는 React Router를 사용하여 페이지 이동을 구현한다.
기본적인 라우터 구조는 다음과 같다.
import { BrowserRouter, Routes, Route } from "react-router-dom"
import Main from "./pages/Main"
import Sub from "./pages/Sub"
function App() {
return (
<BrowserRouter>
<Routes>
<Route index element={<Main />} />
<Route path="/sub" element={<Sub />} />
</Routes>
</BrowserRouter>
)
}
export default App구성 요소
| 구성요소 | 설명 |
|---|---|
| BrowserRouter | 브라우저 URL을 기반으로 라우팅 관리 |
| Routes | 여러 Route를 묶는 컨테이너 |
| Route | URL 경로와 컴포넌트 연결 |
2. 여러 페이지 라우팅 예제
Todo 프로젝트에서는 다음과 같이 여러 페이지를 구성하였다.
import { BrowserRouter, Routes, Route } from "react-router-dom"
import Main from "./pages/Main"
import Sub from "./pages/Sub"
import List from "./pages/List"
import Form from "./pages/Form"
function App() {
return (
<BrowserRouter>
<Routes>
<Route index element={<Main />} />
<Route path="/sub" element={<Sub />} />
<Route path="/list" element={<List />} />
<Route path="/new" element={<Form />} />
</Routes>
</BrowserRouter>
)
}
export default App페이지 구조 예시
/
├ main
├ sub
├ list
└ newURL 경로에 따라 다른 컴포넌트가 렌더링된다.
3. Dummy JSON 이란
Dummy JSON은 테스트용 데이터를 제공하는 API 서비스이다.
실제 서버가 없어도 REST API 요청을 연습할 수 있다.
예시 API
https://dummyjson.com/todos응답 데이터 예시
{
"todos": [
{
"id": 1,
"todo": "Do something",
"completed": false
}
]
}활용 목적
- API 연동 연습
- 테스트용 데이터 사용
- CRUD 기능 실습
4. Dummy JSON으로 Todo 데이터 가져오기
React에서는 useEffect + fetch를 사용하여 데이터를 가져온다.
import { useEffect } from "react"
import { useTodos } from "../context/TodoContext"
import TodoList from "../components/TodoList"
import TodoWriteForm from "../components/TodoWriteForm"
function Main() {
const { setTodos } = useTodos()
useEffect(() => {
fetch("https://dummyjson.com/todos")
.then((res) => res.json())
.then((data) => setTodos(data.todos))
}, [])
return (
<>
<TodoWriteForm />
<TodoList />
</>
)
}
export default Main동작 흐름
- 컴포넌트 마운트
- API 요청 발생
- JSON 데이터 변환
- 상태(state)에 저장
- UI 렌더링
5. Todo 데이터 조회 (GET)
Todo 목록을 가져오는 요청이다.
useEffect(() => {
fetch("https://dummyjson.com/todos")
.then((res) => res.json())
.then((data) => setTodos(data.todos))
}, [])특징
- GET 요청
- 여러 데이터 조회
- 초기 데이터 로딩에 사용
6. Todo 데이터 추가 (POST)
새로운 Todo 데이터를 서버에 추가하는 요청이다.
const handleSubmit = (e) => {
e.preventDefault()
const form = e.target
fetch("https://dummyjson.com/todos/add", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
todo: form.todo.value,
completed: false,
userId: 5,
}),
})
.then((res) => res.json())
.then(console.log)
}POST 특징
- 서버에 새로운 데이터 생성
- body에 JSON 데이터 전달
7. Todo 데이터 삭제 (DELETE)
특정 Todo 데이터를 삭제하는 요청이다.
const removeTodo = (id) => {
fetch(`https://dummyjson.com/todos/${id}`, {
method: "DELETE",
})
.then((res) => res.json())
.then(console.log)
}특징
- 특정 ID 데이터 삭제
- URL 파라미터 사용
8. Todo 데이터 수정 (PUT / PATCH)
Todo 완료 상태를 변경하는 요청이다.
const toggleTodo = (id) => {
const selected = todos.find((todo) => todo.id === id)
fetch(`https://dummyjson.com/todos/${id}`, {
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
completed: !selected.completed,
}),
})
.then((res) => res.json())
.then(console.log)
}PUT / PATCH 차이
| 방식 | 설명 |
|---|---|
| PUT | 전체 데이터 수정 |
| PATCH | 일부 데이터 수정 |
9. Vanilla JavaScript Todo App 구현
Next 실습 이전에 Vanilla JS 기반 Todo App도 구현하였다.
구현 과정
- Todo Header 생성
- TodoList 상태 관리
- 입력창을 통한 Todo 추가
- initialState 데이터 구조 변경
- 삭제 버튼 클릭 시 Todo ID 가져오기
이 과정을 통해 기본적인 상태 관리와 DOM 조작 방식을 이해할 수 있었다.
✅ 정리
오늘 실습을 통해
- React Router를 이용한 페이지 라우팅
- Dummy JSON API를 활용한 더미 데이터 연동
- REST API 요청 방식
- GET (조회)
- POST (생성)
- PUT / PATCH (수정)
- DELETE (삭제)
- React에서 API 데이터를 활용하는 방법
- Vanilla JavaScript 기반 Todo App 구조
를 정리하였다.
React 애플리케이션에서는 라우팅 구조와 API 연동이 핵심적인 요소이다.
하지만 아직 익숙치않아 조금 더 복습을 해야 할 것 같다.
이번 실습을 통해 실제 서비스 구조를 이해하는 데 도움이 되었다.
