Utils 폴더
- 프로젝트 전체에서 사용 가능한 JS / TS 함수를 저장
- React 컴포넌트와 상관없이 사용 가능한 함수들
- EX) 데이터 변환 및 매핑, 날짜 및 시간 관련, 에러 처리
Hooks 폴더
- 커스텀 React hook을 저장하는데 사용
- React 기능(상태 관리 등)을 추상화해서 컴포넌트간에 재사용할 수 있는 로직을 만드는데 도움
- ex) useState, useEffect
- 해당 폴더에 있는 함수들은 React 컴포넌트 내에서만 사용 가능
Utils & Hooks 구분하는 쉬운 방법
❗️❗️ import {useState, useEffect, useCallback} from 'react'; 유무
- 해당 import 문이 있으면 hooks 폴더에
- react 관련 import 문이 없으면 utils 폴더에
참고문헌
- Hooks & Utils 폴더