1.0 KiB
1.0 KiB
🧠 [LEVEL 2] Hook의 심연: 단순 사용을 넘어 오용 방지로
1. useEffect는 '타이머'가 아니다. '동기화' 장치다.
- 초보는
useEffect를 함수 실행기로 쓴다. - 중급은 **"이펙트가 어떤 상태와 외부 시스템(API, 라이브러리)을 동기화하는가?"**를 고민한다.
- Check: 의존성 배열(
[])에 넣은 변수가 정말 이 이펙트의 원인인가?
2. Custom Hooks: 논리의 분리
- 컴포넌트 안에
fetch,loading,error가 가닥가닥 널려 있다면 실패! useFetchData()라는 나만의 훅을 만들어 논리만 쏙 뽑아내라.- 성공 가이드: UI 담당 컴포넌트는
const { data } = useMyLogic();한 줄로 끝나야 한다.
3. useRef: 사라지지 않는 기억
useState는 바뀔 때마다 화면을 다시 그린다(Refrender).useRef는 값이 바뀌어도 화면을 그리지 않는다.- 용도: 이전 화면의 값 저장, DOM 직접 접근(포커스 등), 타이머 ID 보관.