[실무] 05. Custom Hook·CRUD·TypeScript

React JS 실무

React 입문 (5) — Custom Hook·CRUD·TypeScript로 마무리하기

중복 로직은 Custom Hook으로 정리하고, CRUD를 끝까지 연결한 뒤 TypeScript로 안정성을 더하는 방향을 소개합니다.

범위 실습 핵심 Custom Hook·CRUD 선택 TypeScript

Custom Hook + CRUD + TypeScript(개념도)

1) Custom Hook은 “중복 로직”을 줄이는 도구입니다

여러 컴포넌트에서 똑같이 쓰는 데이터 로딩/폼 처리 로직이 있다면 Hook으로 묶으면 유지보수가 쉬워집니다.

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

export default function useFetch(url) {{
  const [data, setData] = useState(null);

  useEffect(() => {{
    fetch(url).then(r => r.json()).then(setData);
  }}, [url]);

  return data;
}}

2) CRUD를 한 번에 이어서 보면 구조가 깔끔해집니다

기능	HTTP	예시
목록 조회	GET	/days
상세 조회	GET	/days/1
생성	POST	/days
수정	PUT	/days/1
삭제	DELETE	/days/1

실무 팁
화면(페이지) 단위로 “목록/상세/편집/생성”을 나누고, API 호출은 공통 유틸로 정리하면 확장하기 편합니다.

3) (선택) TypeScript를 적용하면 안정성이 크게 좋아집니다

규모가 커질수록 “데이터 구조”가 흔들리기 쉽습니다. 이때 타입을 붙이면 리팩터링이 편해집니다.

type Day = {{
  id: number;
  title: string;
  isDone: boolean;
}}

function DayItem({{ day }}: {{ day: Day }}) {{
  return <li>{{day.title}}</li>;
}}

마무리 체크리스트

• 리스트(map) → 상세(파라미터) → API 호출(useEffect) 흐름이 자연스럽게 연결되나요?
• 중복되는 로직을 Custom Hook으로 묶을 위치가 보이시나요?
• 데이터 구조가 복잡해지면 TypeScript 적용이 도움이 될까요?

참고 링크

• React: Custom Hooks
• React Router: Navigation
• TypeScript + React 가이드
• DoLearn 커리큘럼(강의 목록)
• YouTube: Appendix TypeScript(#17) 참고