[11주차] - [9기] 타입스크립트로 함께하는 웹 풀 사이클 개발(React, Node.js) 10회차 - 56

기본 구조 설계

React + TypeScript 환경에서 페이지 구조는 다음과 같이 나눴다.

-pages/
-BookDetailPage.tsx

-components/
-BookInfo.tsx
-BookDescription.tsx
-BookReview.tsx

-hooks/
-useBookDetail.ts

핵심 포인트는 "로직과 UI 분리"

• API 요청 → hooks
• 화면 렌더링 → components

---

데이터 흐름 설계

도서 상세 페이지의 데이터 흐름은 다음과 같다.

URL (bookId)
   ↓
API 요청
   ↓
상태 저장 (loading / data / error)
   ↓
컴포넌트 렌더링

예시 코드:

const { data, isLoading, error }=useBookDetail(bookId);

---

상태 처리

1. 로딩 상태

if (isLoading)return<div>로딩 중...</div>;

UX적으로 skeleton UI 적용하면 더 좋음

---

2. 에러 처리

if (error)return<div>에러가 발생했습니다.</div>;

실제 서비스에서는 toast + retry 버튼 고려

---

3. 데이터 없음

if (!data)return<div>데이터가 없습니다.</div>;

👉 이 케이스 생각보다 많이 발생함

---

1. API 응답 구조 변화 대응

백엔드에서 필드가 바뀌는 경우가 많았다.

예:

• dailyId → goalLogId 같은 변경

해결 방법:

• 타입 정의를 명확하게 관리
• 공통 타입 파일 사용

interfaceBookDetail {
  id:number;
  title:string;
  description:string;
}

---

2. Optional 값 처리

<p>{data.description??"설명이 없습니다."}</p>

undefined 대비는 필수

---

3. URL 기반 라우팅

router.push(`/books/${bookId}`);

중요한 점:

• URL = 상태
• URL로 페이지 재현 가능해야 함

---

UX 개선 포인트

사용자 입장에서 중요한 것

• 빠른 로딩 (캐싱 고려 가능)
• 깔끔한 정보 구조
• 클릭 흐름 자연스럽게

---

적용했던 것

• 로딩 상태 분리
• 컴포넌트 단위 분리
• 에러 UI 제공