From 5f647546e4ea882768ffe6e37e040a01a1692753 Mon Sep 17 00:00:00 2001
From: Yeryeong Kang <dpfud8786@gmail.com>
Date: Sun, 14 Jun 2026 20:18:40 +0900
Subject: [PATCH 01/10] =?UTF-8?q?feat:=20useEffect=EB=A1=9C=20API=20?=
 =?UTF-8?q?=EC=97=B0=EB=8F=99=20=EA=B5=AC=ED=98=84=20(GET/POST)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.jsx | 24 +++++++++++++++++++-----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index ef1e696..e71f571 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,6 +1,5 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import "./App.css";
-import { RESTAURANTS } from "./constants/restaurants";
 import Header from "./components/Header/Header";
 import CategoryFilter from "./components/CategoryFilter/CategoryFilter";
 import RestaurantList from "./components/RestaurantList/RestaurantList";
@@ -11,10 +10,25 @@ function App() {
   const [category, setCategory] = useState("전체");
   const [clickedRestaurant, setClickedRestaurant] = useState(null);
   const [isAddModalOpen, setIsAddModalOpen] = useState(false);
-  const [newRestaurants, setNewRestaurants] = useState(RESTAURANTS);
+  const [newRestaurants, setNewRestaurants] = useState([]);
 
-  const handleFormSubmit = (newRestaurant) => {
-    setNewRestaurants((prev) => [...prev, newRestaurant]);
+  const fetchRestaurants = async () => {
+    const response = await fetch("http://localhost:3000/restaurants");
+    const data = await response.json();
+    setNewRestaurants(data);
+  };
+
+  useEffect(() => {
+    fetchRestaurants(); // 마운트 시 실행
+  }, []);
+
+  const handleFormSubmit = async (newRestaurant) => {
+    await fetch("http://localhost:3000/restaurants", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(newRestaurant),
+    });
+    fetchRestaurants();
     setIsAddModalOpen(false);
   };
 

From aee1eabc4bada45ba8bc336e0c6b9e68eb3a8726 Mon Sep 17 00:00:00 2001
From: Yeryeong Kang <dpfud8786@gmail.com>
Date: Sun, 14 Jun 2026 20:19:33 +0900
Subject: [PATCH 02/10] =?UTF-8?q?fix:=20POST=20=EC=99=84=EB=A3=8C=20?=
 =?UTF-8?q?=ED=9B=84=20GET=20=EC=8B=A4=ED=96=89=EB=90=98=EB=8F=84=EB=A1=9D?=
 =?UTF-8?q?=20await=20=EC=B6=94=EA=B0=80=20(race=20condition=20=EB=B0=A9?=
 =?UTF-8?q?=EC=A7=80)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/App.jsx b/src/App.jsx
index e71f571..2339549 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -28,7 +28,7 @@ function App() {
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify(newRestaurant),
     });
-    fetchRestaurants();
+    await fetchRestaurants();
     setIsAddModalOpen(false);
   };
 

From 58f07c9c9138f1743d3f49c7df659a68a3e0310e Mon Sep 17 00:00:00 2001
From: Yeryeong Kang <dpfud8786@gmail.com>
Date: Sun, 14 Jun 2026 20:20:35 +0900
Subject: [PATCH 03/10] =?UTF-8?q?refactor:=20fetchRestaurants=EC=97=90=20u?=
 =?UTF-8?q?seCallback=20=EC=A0=81=EC=9A=A9=20=EB=B0=8F=20=EC=9D=98?=
 =?UTF-8?q?=EC=A1=B4=EC=84=B1=20=EB=B0=B0=EC=97=B4=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.jsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 2339549..da2f0d3 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import "./App.css";
 import Header from "./components/Header/Header";
 import CategoryFilter from "./components/CategoryFilter/CategoryFilter";
@@ -12,15 +12,15 @@ function App() {
   const [isAddModalOpen, setIsAddModalOpen] = useState(false);
   const [newRestaurants, setNewRestaurants] = useState([]);
 
-  const fetchRestaurants = async () => {
+  const fetchRestaurants = useCallback(async () => {
     const response = await fetch("http://localhost:3000/restaurants");
     const data = await response.json();
     setNewRestaurants(data);
-  };
+  }, []);
 
   useEffect(() => {
-    fetchRestaurants(); // 마운트 시 실행
-  }, []);
+    fetchRestaurants();
+  }, [fetchRestaurants]);
 
   const handleFormSubmit = async (newRestaurant) => {
     await fetch("http://localhost:3000/restaurants", {

From bbbf4bef22960cf1b7dd16ff69e5e575a6ca69eb Mon Sep 17 00:00:00 2001
From: Yeryeong Kang <dpfud8786@gmail.com>
Date: Sun, 14 Jun 2026 20:23:35 +0900
Subject: [PATCH 04/10] =?UTF-8?q?docs:=20step5=20=ED=95=99=EC=8A=B5=20?=
 =?UTF-8?q?=EB=82=B4=EC=9A=A9,=20=EA=B3=A0=EB=AF=BC=20=EA=B3=BC=EC=A0=95,?=
 =?UTF-8?q?=20=EA=B3=BC=EA=B1=B0=20=EC=BD=94=EB=93=9C=20=EB=B9=84=EA=B5=90?=
 =?UTF-8?q?=20=EC=9E=91=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 04-form/README.md    |  42 ---------
 05-effects/README.md |  56 ++++++++++++
 README.md            | 211 +++++++++++++++++++++----------------------
 3 files changed, 157 insertions(+), 152 deletions(-)
 delete mode 100644 04-form/README.md
 create mode 100644 05-effects/README.md

diff --git a/04-form/README.md b/04-form/README.md
deleted file mode 100644
index 6518ccb..0000000
--- a/04-form/README.md
+++ /dev/null
@@ -1,42 +0,0 @@
-# 04. 폼 UI 구현하기: controlled vs uncontrolled
-
-## 🎯 요구 사항
-
-- `Header`의 레스토랑 추가 버튼을 클릭하면 레스토랑 추가 폼이 모달로 뜨도록 구현해 주세요
-  - 이전 단계에서 만들어두었던 `AddRestaurantModal`을 그대로 사용합니다.
-- 카테고리를 선택하고, `<input/>`, `<textarea/>`에 값을 입력한 뒤 '추가하기' 버튼을 클릭하면 레스토랑 목록에 추가되도록 구현해 주세요.
-  - 유효성 검사는 하지 않습니다. 아주 간단하게 입력값을 처리해보는 구현만 해도 충분합니다.
-  - id는 `Date.now()`값을 임의로 할당합니다.
-- (optional) 재사용할 수 있는 Modal 컴포넌트를 만들어서 `AddRestaurantModal`, `RestaurantDetailModal`을 Modal 컴포넌트를 활용해 구현하는 것으로 개선해 보세요
-
-## ✅ 키워드
-
-- controlled vs uncontrolled
-- children props
-
-> 재사용할 수 있는 모달을 만들 때 `children`을 활용해 보세요. 아래와 같은 식으로 UI를 구성할 수 있습니다.
-
-```javascript
-// 설명을 위한 예시용 마크업입니다. 실제로 사용하는 마크업은 template/ 하위의 html을 참고하거나 직접 원하는대로 구현하여 사용해 주세요.
-// 반드시 아래와 같은 형식으로 쓸 필요는 없습니다. 원하는 방식대로 재사용 가능한 <Modal/> 컴포넌트를 만들어 보세요.
-
-// AddRestaurantModal.jsx
-<Modal title="새로운 음식점" onClose={onClose}>
-  <form></form>
-</Modal>
-
-// RestaurantDetailModal.jsx
-<Modal title={restaurant.name} onClose={onClose}>
-  <div className="restaurant-info"></div>
-  <div className="button-container"></div>
-</Modal>
-```
-
-## 🧙‍♀️ 진행 가이드
-
-- 진행 시간: (optional 제외) 2시간 내에 완료하는 것을 목표로 합니다.
-
-## 🔗 참고 문서
-
-- [Sharing State Between Components](https://react.dev/learn/sharing-state-between-components)
-- [API Reference: <input>](https://react.dev/reference/react-dom/components/input)
diff --git a/05-effects/README.md b/05-effects/README.md
new file mode 100644
index 0000000..ebebf77
--- /dev/null
+++ b/05-effects/README.md
@@ -0,0 +1,56 @@
+# 05. API 연동하기: side-effect(feat. effects)
+
+## 🎯 요구 사항
+
+- API로 레스토랑 목록을 불러와 `<RestaurantList />`에 내려줍니다.
+  - 로딩 상태, 에러 상태 등은 고려하지 않습니다.
+- 레스토랑 추가 모달에서 추가하기 버튼을 클릭하면 POST 요청을 보냅니다. 모달이 닫히고, 레스토랑 목록을 다시 불러옵니다.
+
+## ✅ 키워드
+
+- effect (feat. side effect)
+  - useEffect
+
+## 🧙‍♀️ 진행 가이드
+
+- 진행 시간: 2시간 내에 완료하는 것을 목표로 합니다.
+
+### `json-server`로 가짜 서버 띄워 활용하기
+
+연습용 앱이기 때문에 [`json-server`](https://github.com/typicode/json-server)를 활용해 간단한 가짜 REST API를 구축해 사용합니다.
+
+- `npm run server`를 실행합니다. (혹은 `npx json-server db.json` 를 직접 실행해도 상관없습니다)
+- `GET http://localhost:3000/restaurants`으로 `db.json`에 있는 레스토랑 목록을 불러올 수 있습니다.
+
+```javascript
+// GET 예시
+const response = await fetch("http://localhost:3000/restaurants");
+
+// POST 예시
+const response = await fetch("http://localhost:3000/restaurants", {
+  method: "POST",
+  headers: {
+    "Content-Type": "application/json",
+  },
+  body: JSON.stringify(restaurant),
+});
+```
+
+## 🔗 참고 문서
+
+- [Synchronizing with Effects](https://react.dev/learn/synchronizing-with-effects)
+  > Effects let you specify side effects that are caused by rendering itself, rather than by a particular event.
+  - [API Reference: useEffect](https://react.dev/reference/react/useEffect)
+    > useEffect is a React Hook that lets you synchronize a component with an external system.
+- [API Reference: useSate > updater function](https://react.dev/reference/react/useState#updating-state-based-on-the-previous-state)
+  > `set` function에 함수를 넘겨주면 `updater function`으로 동작합니다. 함수가 아닌 값을 넘겨줄 때와 어떻게 다른지 알아보세요.
+
+구현을 다 해본 뒤에 Introduction에서 살펴보았던 설계 원칙과 관련해 조금 더 학습해보고 싶다면 아래 문서들도 추가로 확인해 보세요.
+
+- [You Might Not Need an Effect](https://react.dev/learn/you-might-not-need-an-effect)
+  > You do need Effects to synchronize with external systems.  
+  > In React, data flows from the parent components to their children.
+- [Components and Hooks must be pure](https://react.dev/reference/rules/components-and-hooks-must-be-pure)
+  > Purity in Components and Hooks is a key rule of React that makes your app predictable, easy to debug, and allows React to automatically optimize your code.
+  > Side effects should not run in render, as React can render components multiple times to create the best possible user experience.
+  > One important principle in React is local reasoning: the ability to understand what a component or hook does by looking at its code in isolation. Hooks should be treated like “black boxes” when they are called.
diff --git a/README.md b/README.md
index faba713..d69b9a9 100644
--- a/README.md
+++ b/README.md
@@ -1,191 +1,182 @@
-# Self-Paced React Step 4
+# Self-Paced React Step 5
 
 ## 🎯 개인 목표 및 목표 달성을 위한 행동 가이드
 
 이번 미션을 통해 다음과 같은 학습 경험들을 쌓는 것을 목표로 한다.
 
-**1. Controlled vs Uncontrolled Input 이해**
+**1. side effect와 useEffect 이해**
 
-폼 입력 상태를 React state로 직접 관리하는 방식(controlled)과
-DOM에서 직접 읽는 방식(uncontrolled)의 차이를 이해하고,
-각각 어느 상황에 적합한지 판단할 수 있게 된다.
+컴포넌트 렌더링 자체가 아닌, 외부 시스템과의 동기화가 side effect임을 이해하고,
+왜 useEffect 안에서 처리해야 하는지 설명할 수 있게 된다.
 
-**2. children prop 패턴 이해**
+**2. fetch를 통한 API 연동 흐름 이해**
 
-`children`을 활용하여 재사용 가능한 Modal 컴포넌트를 설계하고,
-두 종류의 모달(`AddRestaurantModal`, `RestaurantDetailModal`)에 공통 구조를 적용한다.
+GET 요청으로 목록을 불러와 state에 저장하고,
+POST 요청 후 목록을 다시 불러오는 전체 흐름을 직접 구현한다.
 
-**3. 폼 데이터 처리 및 state 업데이트 흐름 이해**
+**3. useEffect 의존성 배열 이해**
 
-폼 제출 시 입력값을 수집하여 상위 컴포넌트의 state를 업데이트하고,
-목록에 새 항목이 추가되는 전체 흐름을 직접 구현한다.
-
----
+빈 배열(`[]`)과 값이 있는 배열의 차이를 이해하고,
+effect가 언제 실행되는지 의도적으로 제어할 수 있게 된다.
 
 ## 📝 기능 구현 목록
 
-**1. 헤더 추가 버튼 클릭 시 음식점 추가 모달 열기**
+**1. API로 레스토랑 목록 불러오기**
 
-- 음식점 추가 모달 열림 여부를 boolean state로 관리한다.
-- 버튼 클릭 시 모달을 조건부 렌더링한다.
+- 앱 마운트 시 GET 요청으로 레스토랑 목록을 불러온다.
 
-**2. 음식점 추가 폼 제출 시 목록에 추가**
+**2. 레스토랑 추가 시 POST 요청**
 
-- 폼 입력값을 controlled input으로 관리한다.
-- 폼 제출 시 입력값을 상위 컴포넌트로 전달해 목록에 추가하고 모달을 닫는다.
+- 추가하기 버튼 클릭 시 POST 요청을 보내고, 완료 후 목록을 다시 불러온다.
 
-**3. 모달 닫기**
+## 📚 학습 내용
 
-- backdrop 클릭 또는 폼 제출 완료 시 모달을 닫는다.
+### 1. side effect
 
-**[optional] 재사용 가능한 Modal 컴포넌트 구현**
+컴포넌트 함수는 순수해야 한다. 동일한 props/state를 받으면 항상 동일한 UI를 반환해야 하고, 렌더링 중에 외부에 영향을 주어서는 안 된다. API 호출, DOM 직접 조작, 타이머 설정처럼 외부 시스템과 상호작용하는 작업을 side effect라 한다.
 
-- 두 모달의 공통 구조를 `Modal` 컴포넌트로 추출한다.
-- 각 모달의 고유 내용은 `children`으로 전달한다.
+컴포넌트 함수는 렌더링할 때마다 실행된다. 거기에 API 호출을 직접 넣으면 렌더링될 때마다 요청이 날아가버린다. 그래서 side effect는 렌더링 함수 본문이 아닌, `useEffect`를 통해 렌더링 이후에 실행되도록 분리해야 한다.
 
----
+### 2. useEffect
 
-## 📚 학습 내용
+외부 시스템과 동기화할 때 사용하는 React 훅이다. 렌더링 이후 실행되며, 두 번째 인자인 의존성 배열로 실행 시점을 제어한다.
 
-### 1. Controlled vs Uncontrolled Input
+```jsx
+useEffect(() => {
+  // side effect
+}, [의존성]);
+```
 
-폼 입력값을 다루는 두 가지 방식이다.
+| 의존성 배열 | 실행 시점 |
+|---|---|
+| 없음 | 매 렌더링마다 |
+| `[]` | 마운트 시 한 번 |
+| `[value]` | 마운트 + value 변경 시 |
 
-**Controlled** — 입력값을 React state로 관리한다. `value`로 state를 바인딩하고, `onChange`로 변화를 감지해 state를 업데이트한다. React가 값의 단일 출처(source of truth)가 된다.
+### 3. fetch / async / await
 
-```jsx
-const [name, setName] = useState("");
+**Promise** — 비동기 작업의 결과를 나타내는 객체다. 지금은 없지만 나중에 값을 주겠다는 약속이며, `await`로 그 값이 준비될 때까지 기다릴 수 있다.
 
-<input
-  value={name}
-  onChange={(e) => setName(e.target.value)}
-/>
-```
+**fetch** — 브라우저 내장 함수로 HTTP 요청을 보낸다. 기본값은 GET이며, 두 번째 인자로 method, headers, body를 지정할 수 있다. Promise를 반환한다.
 
-**Uncontrolled** — state 없이, 제출 시점에 DOM에서 값을 직접 읽는다. `e.target.elements` 또는 `FormData`를 활용한다.
+**async / await** — `await`는 Promise가 이행될 때까지 기다린 뒤 결과값을 반환하며, `async`로 선언된 함수 안에서만 사용할 수 있다. `fetch`와 `response.json()` 모두 Promise를 반환하므로 둘 다 `await`가 필요하다.
 
 ```jsx
-const handleSubmit = (e) => {
-  e.preventDefault();
-  const name = e.target.elements.name.value;
+const fetchRestaurants = async () => {
+  const response = await fetch("http://localhost:3000/restaurants");
+  const data = await response.json(); // 응답 body를 JSON으로 파싱
+  setRestaurants(data);
 };
 ```
 
-| | Controlled | Uncontrolled |
-|---|---|---|
-| 값 관리 | React state | DOM |
-| 값 접근 시점 | 언제든지 | 제출 시 |
-| 실시간 유효성 검사 | 가능 | 어려움 |
-| 코드량 | 많음 | 적음 |
-
-이번 미션에서는 Controlled 방식을 사용했다.
-
-### 2. 배열 state 업데이트
+### 4. useCallback
 
-배열 state에 항목을 추가할 때 `push`는 직접 변경이라 리렌더링이 트리거되지 않는다. 스프레드 연산자로 새 배열을 만들어야 한다.
+함수를 메모이제이션하는 React 훅이다. 컴포넌트가 리렌더링될 때마다 함수는 새로 생성되어 참조(주소)가 달라진다.
 
 ```jsx
-setNewRestaurants([...newRestaurants, newRestaurant]);
+// 리렌더링마다 새로운 함수 생성 → 참조가 달라짐
+const fetchRestaurants = async () => { ... };  // 0x001
+// 리렌더링 후
+const fetchRestaurants = async () => { ... };  // 0x002
 ```
 
-### 3. children prop
-
-컴포넌트 태그 사이에 넣은 JSX가 `children`이라는 특수 prop으로 전달된다.
+`useCallback`은 의존성 배열이 바뀌지 않으면 이전에 만든 함수를 그대로 반환해 참조를 안정적으로 유지한다.
 
 ```jsx
-<Modal title="새로운 음식점" onClose={onClose}>
-  <form>...</form>   {/* 이게 children */}
-</Modal>
-
-function Modal({ title, onClose, children }) {
-  return (
-    <div>
-      <div onClick={onClose}></div>
-      <div>
-        <h2>{title}</h2>
-        {children}  {/* <form>...</form>이 여기에 렌더링됨 */}
-      </div>
-    </div>
-  );
-}
+const fetchRestaurants = useCallback(async () => {
+  ...
+}, []);  // 의존성 없음 → 항상 같은 참조 반환
 ```
 
-공통 구조(껍데기)는 `Modal`이 담당하고, 각 모달은 고유한 내용만 children으로 전달하면 된다.
-
----
+`useEffect` 의존성 배열에 함수를 넣어야 할 때, 참조가 바뀌면 effect가 반복 실행된다. `useCallback`으로 참조를 안정화하면 의존성 배열에 안전하게 넣을 수 있다.
 
 ## 🤔 고민했던 문제와 해결 과정에서 배운 점
 
-### 1. e.preventDefault() 위치
+### 1. `fetch` 응답을 두 변수로 나눠서 받는 이유
 
-폼 submit 이벤트의 기본 동작(페이지 새로고침)을 막으려면 `e.preventDefault()`를 이벤트가 발생하는 곳에서 호출해야 한다. App의 `handleFormSubmit`이 받는 건 이벤트가 아니라 음식점 객체이기 때문에, `AddRestaurantModal` 내부의 `handleSubmit`에서 처리해야 한다.
+`response`와 `data`를 왜 굳이 두 번에 나눠서 받는지 의문이었다. `fetch`가 반환하는 건 데이터가 아니라 HTTP 응답 객체였다. 실제 데이터(JSON)는 body 안에 스트림으로 들어있어서, `.json()`으로 한 번 더 파싱해야 꺼낼 수 있다. 한 줄로 쓸 수 있지만 가독성을 위해 두 변수로 나누는 게 일반적이다.
 
-### 2. `<select>`의 controlled input 연결
+```jsx
+const response = await fetch("...");  // HTTP 응답 객체
+const data = await response.json();   // body를 JS 객체로 파싱
+```
 
-`value`와 `onChange`는 `<option>`이 아닌 `<select>`에 달아야 한다. `<option>`의 `value`는 해당 옵션이 선택됐을 때 `e.target.value`로 읽히는 값이고, `<select>`의 `value`가 현재 선택된 상태를 React state와 동기화한다.
+### 2. `fetchRestaurants`를 `useEffect` 밖으로 꺼낸 이유
 
-## 🛠 리팩토링
+처음에는 `useEffect` 안에서 정의하고 바로 호출하는 패턴이 이해가 안 됐다. 정의와 호출을 분리해보니 함수 선언만으로는 실행되지 않는다는 것을 이해했다. 이후 POST 후 목록을 다시 불러와야 해서 `handleFormSubmit`에서도 같은 함수가 필요해졌는데, `useEffect` 안에 선언된 함수는 밖에서 접근할 수 없었다. 그래서 컴포넌트 레벨로 꺼내 두 곳에서 재사용했다.
+
+### 3. `useState`의 초기값으로 `fetchRestaurants`를 넘기면 안 되는 이유
 
-**1. 재사용 가능한 Modal 컴포넌트 추출**
+초기값을 빈 배열로 두지 않고 `useState(fetchRestaurants)`처럼 함수 자체를 넘기면 어떻게 될지 궁금했다. `useState`의 초기값은 첫 렌더링 때 딱 한 번만 사용된다. `fetchRestaurants`는 async 함수라 실행하면 데이터가 아닌 Promise를 반환한다. state에 Promise 객체가 들어가 배열이 아니므로 렌더링이 깨진다.
 
-`AddRestaurantModal`과 `RestaurantDetailModal`이 backdrop, container, title 구조를 중복으로 갖고 있었다. 공통 구조를 `Modal` 컴포넌트로 분리하고, 각 모달은 `children`으로 고유 내용만 넘기도록 리팩토링했다.
+### 4. useEffect 의존성 배열 — 왜 fetchRestaurants를 넣지 않았나
 
-**2. 배열 state 업데이트를 함수형 업데이트로 변경**
+`fetchRestaurants`는 컴포넌트 안에 선언되어 있어 리렌더링마다 새로운 참조가 만들어진다. React는 의존성을 `Object.is`로 비교하는데, 함수/객체는 내용이 같아도 참조가 다르면 변경으로 판단한다. `[fetchRestaurants]`를 넣으면 리렌더링 → 새 참조 → effect 재실행 → 리렌더링 → ... 으로 무한 반복이 생긴다. `fetchRestaurants` 안에서 쓰는 `setNewRestaurants`는 React가 안정성을 보장하므로, `[]`로 두어도 의도한 대로 동작한다.
 
-`[...newRestaurants, newRestaurant]`에서 `(prev) => [...prev, newRestaurant]`로 변경했다. 이전 state에 의존하는 업데이트는 함수형 업데이트가 더 안전하다.
+그렇다면 컴포넌트 밖이나 별도 파일로 꺼내면 되지 않을까 생각했다. 그런데 `fetchRestaurants` 안에서 `setNewRestaurants`를 사용하는데, 이는 `useState`에서 나온 값이라 컴포넌트 안에서만 존재한다. 별도 파일로 분리하려면 setter를 인자로 받는 방식을 써야 한다.
 
-**3. id 생성을 `crypto.randomUUID()`로 변경**
+```js
+// api.js
+export const fetchRestaurants = async (setRestaurants) => {
+  const response = await fetch("...");
+  const data = await response.json();
+  setRestaurants(data);
+};
+```
 
-`Date.now()` 대신 `crypto.randomUUID()`를 사용하도록 변경했다. 밀리초 단위 충돌 가능성을 제거하고 고유성을 보장한다.
+하지만 지금 규모에서는 과한 분리다. 같은 로직을 여러 컴포넌트에서 재사용하거나, 컴포넌트에 state + effect + 핸들러가 많아져 읽기 어려워질 때 커스텀 훅(`useFetchRestaurants`)으로 분리하는 것이 React다운 방식이다.
 
-**4. Modal 래퍼 `<div>` → Fragment, CSS 토글 패턴 제거**
+## 🛠 리팩토링
 
-템플릿(순수 HTML/CSS)에서 `.modal--open` 클래스를 붙이고 떼는 방식으로 모달을 보이고 숨겼는데, React 조건부 렌더링으로 전환하면서 CSS 토글이 불필요해졌다. 래퍼 `<div>`도 Fragment로 교체했다. backdrop과 container가 모두 `position: fixed`라 부모 요소의 레이아웃에 영향을 받지 않기 때문에 래퍼가 없어도 동작이 동일하다.
+**1. fetchRestaurants에 useCallback 적용 + POST 후 await 추가**
+
+`fetchRestaurants`를 `useCallback`으로 감싸 참조를 안정화하고, 의존성 배열을 `[]`에서 `[fetchRestaurants]`로 수정했다. `handleFormSubmit`에서 `fetchRestaurants()` 호출 시 `await`를 추가해 POST 완료 후 GET이 실행되도록 순서를 보장했다.
 
 ## 과거 코드와 비교
 
 ### 달라진 점
 
-**1. 폼 입력값 읽기 방식 — Uncontrolled → Controlled**
+**1. useCallback 사용 여부**
 
 | 구분 | 과거 코드 | 현재 코드 |
 |------|---------|---------|
-| 방식 | Uncontrolled (`FormData`) | Controlled (`useState`) |
-| 값 접근 | 제출 시 DOM에서 읽음 | state로 실시간 관리 |
-| 코드량 | 적음 | 많음 |
+| fetchRestaurants 선언 | `useCallback`으로 감쌈 | 일반 async 함수 |
+| 의존성 배열 | `[fetchRestaurants]` | `[]` |
 
-과거 코드는 state 없이 폼 제출 시 `FormData`로 DOM에서 한 번에 읽었다. 각 input에 `name` 속성이 있으면 키-값 쌍으로 꺼낼 수 있어 코드가 간결하다.
+과거 코드는 `fetchRestaurants`를 의존성 배열에 넣기 위해 `useCallback`으로 참조를 안정화했다. 현재 코드는 `useCallback` 없이 `[]`로 뒀다.
 
-```jsx
-// 과거 — Uncontrolled
-const fd = new FormData(e.currentTarget);
-onAdd({ category: fd.get("category"), name: fd.get("name") });
+**2. id 생성 방식**
 
-// 현재 — Controlled
-const [name, setName] = useState("");
-<input value={name} onChange={(e) => setName(e.target.value)} />
-```
+과거 코드는 처음에 `` `a${Date.now()}` ``로 클라이언트에서 id를 생성해 POST 요청에 포함했다. 리뷰를 통해 클라이언트 생성 id의 문제(밀리초 충돌, 시스템 시간 불일치)를 인지하고 id를 보내지 않아 서버가 발급하도록 수정했다. 현재 코드도 같은 방식이다.
 
 ### 과거 코드에서 배운 점
 
-**1. 함수형 업데이트**
+**1. useCallback — 의존성 배열에 함수를 올바르게 넣는 방법**
 
-리뷰어 코드에서 배열 state 업데이트 시 함수형 업데이트를 사용했다.
+과거 코드는 `fetchRestaurants`를 `useCallback`으로 감싸 참조를 안정화하고 `[fetchRestaurants]`를 의존성 배열에 넣었다. 이를 반영해 현재 코드도 수정했다.
 
 ```jsx
-// 기존 코드 — newRestaurants를 직접 참조
-setNewRestaurants([...newRestaurants, newRestaurant]);
+// 수정 전
+const fetchRestaurants = async () => { ... };
+useEffect(() => { fetchRestaurants(); }, []);
 
-// 함수형 업데이트 — React가 최신 state를 prev로 전달
-setNewRestaurants((prev) => [...prev, newRestaurant]);
+// 수정 후
+const fetchRestaurants = useCallback(async () => { ... }, []);
+useEffect(() => { fetchRestaurants(); }, [fetchRestaurants]);
 ```
 
-React의 state 업데이트는 즉시 반영되지 않아 렌더링 사이클 사이에 `newRestaurants`가 오래된 값일 수 있다. `prev`는 React가 보장하는 최신 state이므로, 이전 state를 기반으로 새 state를 만들 때는 함수형 업데이트가 더 안전하다.
+리뷰어는 대안으로 `useEffect` 안에 함수 선언+실행을 모두 두는 방법도 제시했다. 이 경우 함수가 밖으로 나가지 않아 의존성 배열에 넣을 필요가 없다. 현재 코드에서는 `handleFormSubmit`에서도 `fetchRestaurants`를 재사용해야 해서 이 방법을 선택하지 않았다.
 
-`prev`는 관례적인 이름일 뿐이며, 각 setter에 묶인 해당 state의 최신값이 전달된다. state가 여러 개여도 setter가 다르므로 섞이지 않는다.
+**2. await와 race condition**
 
-**2. `crypto.randomUUID()`**
+POST 요청 후 `await` 없이 GET을 호출하면 POST가 완료되기 전에 GET이 먼저 실행돼 추가한 항목이 목록에 뜨지 않을 수 있다. `await`로 순서를 명시적으로 보장해야 한다.
 
-리뷰어 피드백: *"아주 짧은 시간 안에 여러 항목이 추가될 경우 `Date.now()`는 중복된 id가 생성될 가능성이 있습니다. `crypto.randomUUID()`를 고려해보세요."*
+```jsx
+// 수정 전 — race condition 위험
+await fetch(URL, { method: "POST", ... });
+fetchRestaurants();
 
-`Date.now()`는 밀리초 단위 숫자라 짧은 시간 안에 두 번 호출되면 같은 값이 나올 수 있다. `crypto.randomUUID()`는 브라우저 내장 함수로 `"550e8400-e29b-41d4-a716-446655440000"` 형태의 충돌 없는 고유 ID를 생성한다.
+// 수정 후 — 순서 보장
+await fetch(URL, { method: "POST", ... });
+await fetchRestaurants();
+```

From 80c64dad4ee6740e354c1fddb6b02e935712df64 Mon Sep 17 00:00:00 2001
From: Yeryeong Kang <dpfud8786@gmail.com>
Date: Mon, 15 Jun 2026 01:46:51 +0900
Subject: [PATCH 05/10] =?UTF-8?q?refactor:=20=EB=A7=A4=EC=A7=81=20?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8=EB=A7=81=20=EC=83=81=EC=88=98=ED=99=94,=20al?=
 =?UTF-8?q?t=20=EC=A4=91=EB=B3=B5=20=EC=A0=9C=EA=B1=B0,=20BASE=5FURL=20?=
 =?UTF-8?q?=EC=B6=94=EC=B6=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.jsx                      | 11 +++++++----
 src/components/Header/Header.jsx |  2 +-
 src/constants/categories.js      |  3 ++-
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index da2f0d3..d3f24ac 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,3 +1,4 @@
+import { ALL_CATEGORY } from "./constants/categories";
 import { useCallback, useEffect, useState } from "react";
 import "./App.css";
 import Header from "./components/Header/Header";
@@ -6,20 +7,22 @@ import RestaurantList from "./components/RestaurantList/RestaurantList";
 import RestaurantDetailModal from "./components/Modal/RestaurantDetailModal";
 import AddRestaurantModal from "./components/Modal/AddRestaurantModal";
 
+const BASE_URL = "http://localhost:3000";
+
 function App() {
-  const [category, setCategory] = useState("전체");
+  const [category, setCategory] = useState(ALL_CATEGORY);
   const [clickedRestaurant, setClickedRestaurant] = useState(null);
   const [isAddModalOpen, setIsAddModalOpen] = useState(false);
   const [newRestaurants, setNewRestaurants] = useState([]);
 
   const fetchRestaurants = useCallback(async () => {
-    const response = await fetch("http://localhost:3000/restaurants");
+    const response = await fetch(`${BASE_URL}/restaurants`);
     const data = await response.json();
     setNewRestaurants(data);
   }, []);
 
   useEffect(() => {
-    fetchRestaurants();
+    void fetchRestaurants();
   }, [fetchRestaurants]);
 
   const handleFormSubmit = async (newRestaurant) => {
@@ -33,7 +36,7 @@ function App() {
   };
 
   const filteredRestaurants =
-    category === "전체"
+    category === ALL_CATEGORY
       ? newRestaurants
       : newRestaurants.filter((restaurant) => restaurant.category === category);
 
diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
index 9702af9..e414039 100644
--- a/src/components/Header/Header.jsx
+++ b/src/components/Header/Header.jsx
@@ -11,7 +11,7 @@ export default function Header({ onClick }) {
         aria-label="음식점 추가"
         onClick={onClick}
       >
-        <img src={addButtonImg} alt="음식점 추가" />
+        <img src={addButtonImg} />
       </button>
     </header>
   );
diff --git a/src/constants/categories.js b/src/constants/categories.js
index 3022d90..c43cda1 100644
--- a/src/constants/categories.js
+++ b/src/constants/categories.js
@@ -1,2 +1,3 @@
+export const ALL_CATEGORY = "전체";
 export const CATEGORIES = ["한식", "중식", "일식", "양식", "아시안", "기타"];
-export const FILTER_OPTIONS = ["전체", ...CATEGORIES];
+export const FILTER_OPTIONS = [ALL_CATEGORY, ...CATEGORIES];

From 9daaf854a613b19dc81d72736e881f60d59117ee Mon Sep 17 00:00:00 2001
From: Yeryeong Kang <dpfud8786@gmail.com>
Date: Mon, 15 Jun 2026 02:41:49 +0900
Subject: [PATCH 06/10] =?UTF-8?q?refactor:=20HTTP=20=EC=9A=94=EC=B2=AD=20?=
 =?UTF-8?q?=EB=A1=9C=EC=A7=81=20api.js=EB=A1=9C=20=EB=B6=84=EB=A6=AC,=20?=
 =?UTF-8?q?=EB=A0=88=EC=8A=A4=ED=86=A0=EB=9E=91=20=EB=8D=B0=EC=9D=B4?=
 =?UTF-8?q?=ED=84=B0=20=EB=A1=9C=EC=A7=81=20useRestaurants=20=EC=BB=A4?=
 =?UTF-8?q?=EC=8A=A4=ED=85=80=20=ED=9B=85=EC=9C=BC=EB=A1=9C=20=EB=B6=84?=
 =?UTF-8?q?=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.jsx                 | 23 ++++-------------------
 src/api.js                  | 14 ++++++++++++++
 src/hooks/useRestaurants.js | 22 ++++++++++++++++++++++
 3 files changed, 40 insertions(+), 19 deletions(-)
 create mode 100644 src/api.js
 create mode 100644 src/hooks/useRestaurants.js

diff --git a/src/App.jsx b/src/App.jsx
index d3f24ac..2c542fa 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,37 +1,22 @@
 import { ALL_CATEGORY } from "./constants/categories";
-import { useCallback, useEffect, useState } from "react";
+import { useState } from "react";
 import "./App.css";
 import Header from "./components/Header/Header";
 import CategoryFilter from "./components/CategoryFilter/CategoryFilter";
 import RestaurantList from "./components/RestaurantList/RestaurantList";
 import RestaurantDetailModal from "./components/Modal/RestaurantDetailModal";
 import AddRestaurantModal from "./components/Modal/AddRestaurantModal";
-
-const BASE_URL = "http://localhost:3000";
+import { useRestaurants } from "./hooks/useRestaurants";
 
 function App() {
   const [category, setCategory] = useState(ALL_CATEGORY);
   const [clickedRestaurant, setClickedRestaurant] = useState(null);
   const [isAddModalOpen, setIsAddModalOpen] = useState(false);
-  const [newRestaurants, setNewRestaurants] = useState([]);
-
-  const fetchRestaurants = useCallback(async () => {
-    const response = await fetch(`${BASE_URL}/restaurants`);
-    const data = await response.json();
-    setNewRestaurants(data);
-  }, []);
 
-  useEffect(() => {
-    void fetchRestaurants();
-  }, [fetchRestaurants]);
+  const { newRestaurants, registerRestaurant } = useRestaurants();
 
   const handleFormSubmit = async (newRestaurant) => {
-    await fetch("http://localhost:3000/restaurants", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(newRestaurant),
-    });
-    await fetchRestaurants();
+    await registerRestaurant(newRestaurant);
     setIsAddModalOpen(false);
   };
 
diff --git a/src/api.js b/src/api.js
new file mode 100644
index 0000000..1c2ae71
--- /dev/null
+++ b/src/api.js
@@ -0,0 +1,14 @@
+const BASE_URL = "http://localhost:3000";
+
+export async function getRestaurants() {
+  const response = await fetch(`${BASE_URL}/restaurants`);
+  return response.json();
+}
+
+export async function addRestaurant(newRestaurant) {
+  await fetch(`${BASE_URL}/restaurants`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(newRestaurant),
+  });
+}
diff --git a/src/hooks/useRestaurants.js b/src/hooks/useRestaurants.js
new file mode 100644
index 0000000..27954d3
--- /dev/null
+++ b/src/hooks/useRestaurants.js
@@ -0,0 +1,22 @@
+import { useCallback, useEffect, useState } from "react";
+import { getRestaurants, addRestaurant } from "../api";
+
+export function useRestaurants() {
+  const [newRestaurants, setNewRestaurants] = useState([]);
+
+  const fetchRestaurants = useCallback(async () => {
+    const data = await getRestaurants();
+    setNewRestaurants(data);
+  }, []);
+
+  useEffect(() => {
+    void fetchRestaurants();
+  }, [fetchRestaurants]);
+
+  async function registerRestaurant(newRestaurant) {
+    await addRestaurant(newRestaurant);
+    await fetchRestaurants();
+  }
+
+  return { newRestaurants, registerRestaurant };
+}

From 558922e35c33feb3193c4b96c071cbe013f12014 Mon Sep 17 00:00:00 2001
From: Yeryeong Kang <dpfud8786@gmail.com>
Date: Mon, 15 Jun 2026 03:01:17 +0900
Subject: [PATCH 07/10] =?UTF-8?q?feat:=20=EC=97=90=EB=9F=AC=20=EC=B2=98?=
 =?UTF-8?q?=EB=A6=AC=20=EC=B6=94=EA=B0=80=20(GET=20=EC=97=90=EB=9F=AC=20?=
 =?UTF-8?q?=EC=83=81=ED=83=9C=20=EA=B4=80=EB=A6=AC,=20POST=20=EC=97=90?=
 =?UTF-8?q?=EB=9F=AC=20alert)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.jsx                 | 11 ++++++++---
 src/api.js                  |  4 +++-
 src/hooks/useRestaurants.js | 11 ++++++++---
 3 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 2c542fa..c15df80 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -13,11 +13,15 @@ function App() {
   const [clickedRestaurant, setClickedRestaurant] = useState(null);
   const [isAddModalOpen, setIsAddModalOpen] = useState(false);
 
-  const { newRestaurants, registerRestaurant } = useRestaurants();
+  const { newRestaurants, registerRestaurant, error } = useRestaurants();
 
   const handleFormSubmit = async (newRestaurant) => {
-    await registerRestaurant(newRestaurant);
-    setIsAddModalOpen(false);
+    try {
+      await registerRestaurant(newRestaurant);
+      setIsAddModalOpen(false);
+    } catch {
+      alert("음식점 추가에 실패했습니다. 다시 시도해주세요.");
+    }
   };
 
   const filteredRestaurants =
@@ -49,6 +53,7 @@ function App() {
     <>
       <Header onClick={handleAddModalOpen} />
       <main>
+        {error && <p>{error}</p>}
         <CategoryFilter
           category={category}
           onChangeCategory={handleSelectChange}
diff --git a/src/api.js b/src/api.js
index 1c2ae71..4858866 100644
--- a/src/api.js
+++ b/src/api.js
@@ -2,13 +2,15 @@ const BASE_URL = "http://localhost:3000";
 
 export async function getRestaurants() {
   const response = await fetch(`${BASE_URL}/restaurants`);
+  if (!response.ok) throw new Error("오류입니다.");
   return response.json();
 }
 
 export async function addRestaurant(newRestaurant) {
-  await fetch(`${BASE_URL}/restaurants`, {
+  const response = await fetch(`${BASE_URL}/restaurants`, {
     method: "POST",
     headers: { "Content-Type": "application/json" },
     body: JSON.stringify(newRestaurant),
   });
+  if (!response.ok) throw new Error("오류입니다.");
 }
diff --git a/src/hooks/useRestaurants.js b/src/hooks/useRestaurants.js
index 27954d3..7a044a2 100644
--- a/src/hooks/useRestaurants.js
+++ b/src/hooks/useRestaurants.js
@@ -3,10 +3,15 @@ import { getRestaurants, addRestaurant } from "../api";
 
 export function useRestaurants() {
   const [newRestaurants, setNewRestaurants] = useState([]);
+  const [error, setError] = useState();
 
   const fetchRestaurants = useCallback(async () => {
-    const data = await getRestaurants();
-    setNewRestaurants(data);
+    try {
+      const data = await getRestaurants();
+      setNewRestaurants(data);
+    } catch (e) {
+      setError("음식점 목록을 불러오지 못했습니다.");
+    }
   }, []);
 
   useEffect(() => {
@@ -18,5 +23,5 @@ export function useRestaurants() {
     await fetchRestaurants();
   }
 
-  return { newRestaurants, registerRestaurant };
+  return { newRestaurants, registerRestaurant, error };
 }

From 9791aabcc6612dae0e94293b36f15f34ed38b57c Mon Sep 17 00:00:00 2001
From: Yeryeong Kang <dpfud8786@gmail.com>
Date: Mon, 15 Jun 2026 03:04:42 +0900
Subject: [PATCH 08/10] =?UTF-8?q?feat:=20=EB=A1=9C=EB=94=A9=20=EC=83=81?=
 =?UTF-8?q?=ED=83=9C=20=EC=B6=94=EA=B0=80=20(isLoading,=20finally)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.jsx                 | 4 +++-
 src/hooks/useRestaurants.js | 6 +++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index c15df80..5c5d6c0 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -13,7 +13,8 @@ function App() {
   const [clickedRestaurant, setClickedRestaurant] = useState(null);
   const [isAddModalOpen, setIsAddModalOpen] = useState(false);
 
-  const { newRestaurants, registerRestaurant, error } = useRestaurants();
+  const { newRestaurants, registerRestaurant, error, isLoading } =
+    useRestaurants();
 
   const handleFormSubmit = async (newRestaurant) => {
     try {
@@ -53,6 +54,7 @@ function App() {
     <>
       <Header onClick={handleAddModalOpen} />
       <main>
+        {isLoading && <p>로딩중입니다.</p>}
         {error && <p>{error}</p>}
         <CategoryFilter
           category={category}
diff --git a/src/hooks/useRestaurants.js b/src/hooks/useRestaurants.js
index 7a044a2..c8fa9f8 100644
--- a/src/hooks/useRestaurants.js
+++ b/src/hooks/useRestaurants.js
@@ -4,13 +4,17 @@ import { getRestaurants, addRestaurant } from "../api";
 export function useRestaurants() {
   const [newRestaurants, setNewRestaurants] = useState([]);
   const [error, setError] = useState();
+  const [isLoading, setIsLoading] = useState(false);
 
   const fetchRestaurants = useCallback(async () => {
+    setIsLoading(true);
     try {
       const data = await getRestaurants();
       setNewRestaurants(data);
     } catch (e) {
       setError("음식점 목록을 불러오지 못했습니다.");
+    } finally {
+      setIsLoading(false);
     }
   }, []);
 
@@ -23,5 +27,5 @@ export function useRestaurants() {
     await fetchRestaurants();
   }
 
-  return { newRestaurants, registerRestaurant, error };
+  return { newRestaurants, registerRestaurant, error, isLoading };
 }

From 1c4f3d1c8a11e6a2479a3ab840d56c85efd012a6 Mon Sep 17 00:00:00 2001
From: Yeryeong Kang <dpfud8786@gmail.com>
Date: Mon, 15 Jun 2026 03:17:43 +0900
Subject: [PATCH 09/10] =?UTF-8?q?docs:=20=EB=A6=AC=ED=8C=A9=ED=86=A0?=
 =?UTF-8?q?=EB=A7=81=20=EB=82=B4=EC=9A=A9=20=EB=B0=8F=20=ED=95=99=EC=8A=B5?=
 =?UTF-8?q?=20=EB=82=B4=EC=9A=A9=20README=EC=97=90=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 141 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 141 insertions(+)

diff --git a/README.md b/README.md
index d69b9a9..c0232ab 100644
--- a/README.md
+++ b/README.md
@@ -90,6 +90,65 @@ const fetchRestaurants = useCallback(async () => {
 
 `useEffect` 의존성 배열에 함수를 넣어야 할 때, 참조가 바뀌면 effect가 반복 실행된다. `useCallback`으로 참조를 안정화하면 의존성 배열에 안전하게 넣을 수 있다.
 
+### 5. 커스텀 훅
+
+React hooks(`useState`, `useEffect` 등)를 사용하는 일반 함수다. 이름은 `use`로 시작해야 한다. 컴포넌트에서 데이터/로직을 분리할 때 사용한다.
+
+```js
+export function useRestaurants() {
+  const [restaurants, setRestaurants] = useState([]);
+  // ...state, effect, 함수 정의
+
+  return { restaurants, registerRestaurant, error, isLoading };
+}
+
+// App에서
+const { restaurants, registerRestaurant } = useRestaurants();
+```
+
+훅은 "어떻게 데이터를 다루는가"를 담당하고, 컴포넌트는 "어떻게 UI를 보여주는가"만 담당하도록 분리된다.
+
+### 6. api.js 분리
+
+HTTP 요청은 React와 무관한 로직이다. `api.js`로 분리하면 컴포넌트/훅은 "어떻게 요청을 보내는지"를 몰라도 된다.
+
+```js
+// api.js — HTTP만 담당
+export async function getRestaurants() {
+  const response = await fetch(`${BASE_URL}/restaurants`);
+  if (!response.ok) throw new Error("Failed to fetch");
+  return response.json();
+}
+```
+
+`response.ok`가 `false`(4xx, 5xx)여도 `fetch`는 에러를 던지지 않는다. 수동으로 체크해서 throw해야 한다.
+
+### 7. 에러 처리 레이어
+
+에러 처리는 어디서 할지를 역할에 따라 나눈다.
+
+| 레이어 | 역할 | 처리 방식 |
+|---|---|---|
+| api.js | HTTP 에러 감지 | `throw` |
+| useRestaurants | GET 에러 — 데이터 상태 | `setError(메시지)` |
+| App | POST 에러 — UI 반응 | `alert()` |
+
+### 8. finally
+
+`try/catch/finally`에서 `finally`는 성공/실패 상관없이 항상 실행된다. 로딩 상태 해제처럼 결과와 무관하게 반드시 실행해야 하는 코드에 쓴다.
+
+```js
+setIsLoading(true);
+try {
+  const data = await getRestaurants();
+  setNewRestaurants(data);
+} catch (e) {
+  setError("불러오지 못했습니다.");
+} finally {
+  setIsLoading(false);  // 성공/실패 상관없이 실행
+}
+```
+
 ## 🤔 고민했던 문제와 해결 과정에서 배운 점
 
 ### 1. `fetch` 응답을 두 변수로 나눠서 받는 이유
@@ -126,12 +185,94 @@ export const fetchRestaurants = async (setRestaurants) => {
 
 하지만 지금 규모에서는 과한 분리다. 같은 로직을 여러 컴포넌트에서 재사용하거나, 컴포넌트에 state + effect + 핸들러가 많아져 읽기 어려워질 때 커스텀 훅(`useFetchRestaurants`)으로 분리하는 것이 React다운 방식이다.
 
+### 5. api.js + 커스텀 훅 분리 과정에서의 실수
+
+**파라미터 누락 + 잘못된 인자**
+
+`handleFormSubmit`을 `async () =>`로 선언해 폼 데이터를 받지 않았다. 그 상태에서 `addRestaurant(fetchRestaurants)`처럼 함수 참조를 인자로 넘겼다. 폼 데이터는 핸들러 파라미터로 받아야 한다.
+
+```js
+// 틀린 예
+const handleFormSubmit = async () => {
+  await addRestaurant(fetchRestaurants);  // 함수를 넘겨버림
+
+// 맞는 예
+const handleFormSubmit = async (newRestaurant) => {
+  await registerRestaurant(newRestaurant);
+```
+
+**훅 return에서 데이터 누락**
+
+`useRestaurants`에서 `fetchRestaurants`만 return하고 `newRestaurants`를 빠뜨렸다. `fetchRestaurants`는 데이터를 불러오는 함수고, 불러온 데이터는 `newRestaurants` state에 저장된다. 컴포넌트가 렌더링에 쓸 데이터 자체를 반환해야 한다.
+
+**훅 함수와 api.js 함수의 이름 충돌**
+
+훅에 `addRestaurant`를 추가하려 했는데 `api.js`에서 같은 이름을 import하고 있어 충돌이 생겼다. 임시로 `addRestaurants`(복수형)을 썼으나 하나를 추가하는 함수에 복수형은 의미가 맞지 않았다. 역할을 드러내는 다른 이름(`registerRestaurant`)으로 정리했다.
+
+### 6. 에러 처리에서의 실수
+
+**useCallback 의존성 배열에 error state를 넣은 것**
+
+`catch` 블록에서 `setError`를 쓰니 `error`가 의존성이라 생각해 `useCallback`의 의존성 배열에 `[error]`를 넣었다. 에러 발생 → `error` state 변경 → `fetchRestaurants` 재생성 → `useEffect` 재실행 → 또 에러 → 무한루프가 된다. `fetchRestaurants`는 `error`를 읽지 않고 `setError`만 호출하므로 의존성 배열은 `[]`가 맞다.
+
+**catch에서 state 변수를 그대로 setError에 넣은 것**
+
+```js
+const [error, setError] = useState();
+
+catch {
+  setError(error);  // error는 발생한 에러가 아니라 state 변수
+}
+```
+
+`catch` 블록에서 발생한 에러를 받으려면 `catch (e)`로 변수를 선언해야 한다. 변수명을 state와 같은 `error`로 쓰면 헷갈리므로 `e`처럼 다른 이름을 쓰거나, 에러 객체가 필요 없으면 그냥 `catch`로 쓴다.
+
 ## 🛠 리팩토링
 
 **1. fetchRestaurants에 useCallback 적용 + POST 후 await 추가**
 
 `fetchRestaurants`를 `useCallback`으로 감싸 참조를 안정화하고, 의존성 배열을 `[]`에서 `[fetchRestaurants]`로 수정했다. `handleFormSubmit`에서 `fetchRestaurants()` 호출 시 `await`를 추가해 POST 완료 후 GET이 실행되도록 순서를 보장했다.
 
+**2. 매직 스트링 상수화**
+
+`"전체"`라는 문자열이 여러 곳에 흩어져 있었다. 오타가 생겨도 찾기 어렵고, 변경 시 모든 곳을 바꿔야 한다. `ALL_CATEGORY` 상수로 추출해 한 곳에서 관리하도록 했다.
+
+**3. aria-label + alt 중복 제거**
+
+스크린 리더는 `aria-label`과 `alt`를 모두 읽는다. 버튼에 `aria-label="음식점 추가"`가 있을 때 내부 이미지에 같은 내용의 `alt`를 두면 "음식점 추가 음식점 추가"로 두 번 읽힌다. `alt`를 제거해 중복을 없앴다.
+
+**4. void 키워드**
+
+`useEffect`는 cleanup 함수 또는 `undefined`를 반환해야 한다. async 함수는 항상 Promise를 반환하므로 `useEffect` 콜백에서 async 함수를 직접 호출하면 Promise가 반환되어 경고가 발생한다. `void`를 붙이면 반환값을 `undefined`로 만들어 이를 방지한다.
+
+```js
+useEffect(() => {
+  void fetchRestaurants();  // Promise를 버리고 undefined 반환
+}, [fetchRestaurants]);
+```
+
+**5. BASE_URL 추출 + api.js 분리**
+
+URL을 컴포넌트 안에 직접 쓰면 여러 곳에 흩어지고 변경 시 모두 찾아야 한다. `BASE_URL` 상수로 추출하고, HTTP 요청 로직 전체를 `api.js`로 분리했다.
+
+**6. useRestaurants 커스텀 훅 분리**
+
+레스토랑 데이터 관련 state + 함수를 `useRestaurants`로 분리했다. App은 어떻게 데이터를 불러오는지 몰라도 되고, 결과만 받아 UI를 그린다.
+
+```js
+// 분리 전 — App에 데이터 로직이 섞임
+const [newRestaurants, setNewRestaurants] = useState([]);
+const fetchRestaurants = useCallback(async () => { ... }, []);
+useEffect(() => { void fetchRestaurants(); }, [fetchRestaurants]);
+
+// 분리 후 — 한 줄로
+const { newRestaurants, registerRestaurant, error, isLoading } = useRestaurants();
+```
+
+**7. 에러 처리 + 로딩 상태 추가**
+
+GET 에러는 훅에서 `error` state로, POST 에러는 App에서 `alert`으로 처리하도록 레이어를 나눴다. `finally`로 성공/실패 상관없이 로딩 상태가 해제되도록 했다.
+
 ## 과거 코드와 비교
 
 ### 달라진 점

From 5b35207bcacf005e6d75a12eb4de592dcf8a7829 Mon Sep 17 00:00:00 2001
From: Yeryeong Kang <dpfud8786@gmail.com>
Date: Mon, 15 Jun 2026 21:43:54 +0900
Subject: [PATCH 10/10] =?UTF-8?q?docs:=20useEffect=EC=99=80=20useCallback?=
 =?UTF-8?q?=20=EC=84=B9=EC=85=98=20=ED=86=B5=ED=95=A9=20=EC=A0=95=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 87 +++++++++++++++++++++++++++++++++++--------------------
 1 file changed, 55 insertions(+), 32 deletions(-)

diff --git a/README.md b/README.md
index c0232ab..0a708d8 100644
--- a/README.md
+++ b/README.md
@@ -37,15 +37,18 @@ effect가 언제 실행되는지 의도적으로 제어할 수 있게 된다.
 
 컴포넌트 함수는 렌더링할 때마다 실행된다. 거기에 API 호출을 직접 넣으면 렌더링될 때마다 요청이 날아가버린다. 그래서 side effect는 렌더링 함수 본문이 아닌, `useEffect`를 통해 렌더링 이후에 실행되도록 분리해야 한다.
 
-### 2. useEffect
+### 2. useEffect와 useCallback
 
-외부 시스템과 동기화할 때 사용하는 React 훅이다. 렌더링 이후 실행되며, 두 번째 인자인 의존성 배열로 실행 시점을 제어한다.
+두 훅 모두 의존성 배열을 사용하지만 역할이 다르다.
 
-```jsx
-useEffect(() => {
-  // side effect
-}, [의존성]);
-```
+| 훅 | 역할 | 실행 시점 |
+|---|---|---|
+| `useEffect` | side effect 실행 | 의존성이 바뀔 때마다 안의 코드 실행 |
+| `useCallback` | 함수 참조 유지 | 의존성이 바뀔 때만 함수를 새로 만들고, 그 외엔 이전 참조 반환 |
+
+**useEffect**
+
+외부 시스템과 동기화할 때 사용한다. 렌더링 이후 실행되며, 의존성 배열로 실행 시점을 제어한다.
 
 | 의존성 배열 | 실행 시점 |
 |---|---|
@@ -53,6 +56,47 @@ useEffect(() => {
 | `[]` | 마운트 시 한 번 |
 | `[value]` | 마운트 + value 변경 시 |
 
+**왜 같이 쓰는가**
+
+컴포넌트가 리렌더링될 때마다 함수는 새로 만들어져 참조(주소)가 달라진다. `useEffect` 의존성 배열에 함수를 넣으면, 리렌더링마다 참조가 바뀌어 effect가 반복 실행되는 무한루프가 생긴다.
+
+```js
+// 리렌더링마다 새 참조 → 무한루프
+const fetchRestaurants = async () => { ... };  // 매번 0x001, 0x002...
+useEffect(() => { fetchRestaurants(); }, [fetchRestaurants]);
+```
+
+`useCallback`으로 감싸면 의존성이 바뀌지 않는 한 같은 참조를 반환해 루프가 끊긴다.
+
+```js
+const fetchRestaurants = useCallback(async () => {
+  const data = await getRestaurants();
+  setNewRestaurants(data);
+}, []);  // 의존성 없음 → 항상 같은 참조
+
+useEffect(() => {
+  void fetchRestaurants();
+}, [fetchRestaurants]);  // 참조가 안 바뀌니 최초 1번만 실행
+```
+
+**useCallback 의존성 배열**
+
+"이 함수가 읽는 값"을 넣는다. 함수 안에서 바뀔 수 있는 값을 참조하면 그 값이 의존성이 된다.
+
+```js
+// [] — 외부 값을 읽지 않으므로 항상 같은 참조
+const fetchRestaurants = useCallback(async () => {
+  const data = await getRestaurants();
+  setNewRestaurants(data);
+}, []);
+
+// [category] — category가 바뀌면 함수를 새로 만들어야 함
+const fetchByCategory = useCallback(async () => {
+  const data = await getRestaurants(category);
+  setNewRestaurants(data);
+}, [category]);
+```
+
 ### 3. fetch / async / await
 
 **Promise** — 비동기 작업의 결과를 나타내는 객체다. 지금은 없지만 나중에 값을 주겠다는 약속이며, `await`로 그 값이 준비될 때까지 기다릴 수 있다.
@@ -69,28 +113,7 @@ const fetchRestaurants = async () => {
 };
 ```
 
-### 4. useCallback
-
-함수를 메모이제이션하는 React 훅이다. 컴포넌트가 리렌더링될 때마다 함수는 새로 생성되어 참조(주소)가 달라진다.
-
-```jsx
-// 리렌더링마다 새로운 함수 생성 → 참조가 달라짐
-const fetchRestaurants = async () => { ... };  // 0x001
-// 리렌더링 후
-const fetchRestaurants = async () => { ... };  // 0x002
-```
-
-`useCallback`은 의존성 배열이 바뀌지 않으면 이전에 만든 함수를 그대로 반환해 참조를 안정적으로 유지한다.
-
-```jsx
-const fetchRestaurants = useCallback(async () => {
-  ...
-}, []);  // 의존성 없음 → 항상 같은 참조 반환
-```
-
-`useEffect` 의존성 배열에 함수를 넣어야 할 때, 참조가 바뀌면 effect가 반복 실행된다. `useCallback`으로 참조를 안정화하면 의존성 배열에 안전하게 넣을 수 있다.
-
-### 5. 커스텀 훅
+### 4. 커스텀 훅
 
 React hooks(`useState`, `useEffect` 등)를 사용하는 일반 함수다. 이름은 `use`로 시작해야 한다. 컴포넌트에서 데이터/로직을 분리할 때 사용한다.
 
@@ -108,7 +131,7 @@ const { restaurants, registerRestaurant } = useRestaurants();
 
 훅은 "어떻게 데이터를 다루는가"를 담당하고, 컴포넌트는 "어떻게 UI를 보여주는가"만 담당하도록 분리된다.
 
-### 6. api.js 분리
+### 5. api.js 분리
 
 HTTP 요청은 React와 무관한 로직이다. `api.js`로 분리하면 컴포넌트/훅은 "어떻게 요청을 보내는지"를 몰라도 된다.
 
@@ -123,7 +146,7 @@ export async function getRestaurants() {
 
 `response.ok`가 `false`(4xx, 5xx)여도 `fetch`는 에러를 던지지 않는다. 수동으로 체크해서 throw해야 한다.
 
-### 7. 에러 처리 레이어
+### 6. 에러 처리 레이어
 
 에러 처리는 어디서 할지를 역할에 따라 나눈다.
 
@@ -133,7 +156,7 @@ export async function getRestaurants() {
 | useRestaurants | GET 에러 — 데이터 상태 | `setError(메시지)` |
 | App | POST 에러 — UI 반응 | `alert()` |
 
-### 8. finally
+### 7. finally
 
 `try/catch/finally`에서 `finally`는 성공/실패 상관없이 항상 실행된다. 로딩 상태 해제처럼 결과와 무관하게 반드시 실행해야 하는 코드에 쓴다.