<aside> 💡

React는 상태 관리 + 렌더링 제어를 위해 다양한 use Hook을 제공

</aside>

Hook	기억하는 것	목적
useState	상태 값	화면 상태 관리
useEffect	사이드 이펙트	렌더링 이후 작업
useRef	변경 가능한 값	DOM 접근 / 값 유지
useContext	전역 값	전역 상태 공유
useMemo	값	연산 최적화
useCallback	함수	재생성 방지
useReducer	상태 로직	복잡한 상태 관리
useId	고유 ID	접근성
useTransition	우선순위	UI 부드럽게

1. 기본 Hook

`useState` 상태(state) 관리

const [count,setCount]=useState(0);

값 저장
값 변경 시 재렌더링

`useEffect` 사이드 이펙트 처리

useEffect(() => {
// API 호출, 이벤트 등록 등
}, []);

렌더링 이후 실행
Dependency 변경 시 실행
- [ ] → 최초 마운트 시 1회 실행
- [변수명] → 변수명 값이 변경될 때마다 실행
- 생략 → 매 렌더링마다 실행
예시

`useRef` DOM 접근 또는 값 저장 (재렌더링 없음)

constinputRef=useRef(null);

DOM 직접 접근
렌더링 없이 값 유지
렌더링 사이에서도 값이 유지됨