17 lines
1.0 KiB
Markdown
17 lines
1.0 KiB
Markdown
# 🧠 [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 보관.
|