[멋사] API fetch/custom hook 구현

물론이야. 아래는 fetch 직접 사용과 useFetch 커스텀 훅을 비교 정리한 velog용 글 형식의 간단한 개념 정리야:

fetch 직접 사용 vs 커스텀 훅(useFetch) 사용 비교

1. fetch 직접 사용

개요

React 컴포넌트 내부에서 fetch() 함수를 직접 호출하여 데이터를 요청하고, useState, useEffect 등을 통해 상태를 관리하는 방식.

장점

• 코드 흐름이 직관적이고 이해하기 쉬움
• API 요청마다 다른 로직을 유연하게 작성 가능

단점

• 여러 컴포넌트에서 동일한 요청을 구현할 경우 코드 중복이 많아짐
• 로딩, 에러, 데이터 상태 등을 매번 직접 관리해야 함
• UI와 비즈니스 로직이 섞여 코드가 복잡해질 수 있음

2. useFetch 커스텀 훅 사용

개요

API 요청 및 관련 상태 관리(loading, error, data)를 커스텀 훅으로 분리하여 관리하는 방식. 주로 재사용성과 관심사 분리를 위해 사용함.

장점

• 로직 재사용이 가능하여 코드 중복 최소화
• 로딩, 에러 처리 등의 상태 관리가 일관됨
• 컴포넌트는 UI에만 집중할 수 있어 코드 구조가 깔끔해짐
• 유지보수가 쉬움 (훅 하나만 수정하면 됨)

단점

• 초기에 구조를 이해하고 설정하는 데 시간이 필요함
• 훅 내부를 커스터마이징하려면 추가 작업이 필요할 수 있음
• 단순한 요청에도 훅 사용이 과할 수 있음

결론

• 작은 프로젝트나 간단한 요청에는 fetch 직접 사용이 편리
• 여러 컴포넌트에서 같은 API를 호출하거나 상태 관리가 필요한 경우에는 useFetch 커스텀 훅을 사용하는 것이 효율적