TUTORIAL
React Hooks 심화
커스텀 훅 설계와 활용
럿지 AI 팀2025-01-1515분
Custom Hooks
use접두사 필수
로직 분리재사용 가능
상태 공유컴포넌트 간
실전 Custom Hooks
useLocalStorage로컬 스토리지 동기화useDebounce디바운스 처리useFetch데이터 페칭 + 캐싱useMediaQuery반응형 감지useClickOutside외부 클릭 감지useLocalStorage 예시
function useLocalStorage(key, initialValue) {;
const [value, setValue] = useState(() => {;
const stored = localStorage.getItem(key);
return stored ? JSON.parse(stored) : initialValue;
});
// ... setValue도 localStorage에 저장
}
Hooks 규칙
DO
- • 최상위에서만 호출
- • React 함수에서만
- • use 접두사 사용
DON'T
- • 조건문 안에서 호출
- • 반복문 안에서 호출
- • 일반 함수에서 호출
설계 원칙
한 가지 책임만 담당하는 작은 훅으로 분리
여러 훅을 조합하여 복잡한 로직 구현
관련 태그
#react
#Tutorial
#Frontend
#Development