Hooks

hook
기본 3가지 = State, Effect, Context

추가 hooks

useReducer
useCallback
useMemo
useRef
useImperativeHandle
useLayoutEffect
useDebugValue

위 hook들 외 내가 어떤 동작을 하게 하고 싶다면 위 Hook들을 기반으로 새로운 hook을 만들어서 사용하면
'커스텀 hook'

 

클래스 컴포넌트에는 Hook 사용할 수 없다

state로 만들면

Reducer로 하면

이렇게 만들어도

하는 역할은 똑같다

그럼 왜 Reducer를 만들까?

0이면 짱구, + 하면 철수, - 하면 맹구의 이름으로 바뀐다

State에서는 Reducer보다 더 많은것들을 적어야 작동한다

그래서 Reducer를 사용하는 것

useState: 이전 값을 인자로/ 초기화 지연(함수)
useEffect: 의존성 배열, 안주거나 / [ ] / [a, b]
useLayoutEffect: useEffect와 유사 모든 DOM 변경 후 브라우저가 화면을 그리기 이전 시점에 동기적으로 수행됨
useReducer: useState대체 state / reducer / action
(useContext)
(useCallback & useMemo)
useRef: current라는 상자. 내용의 변경을 알려주지 않음. 콜백 ref 사용