useState
- 매번 실행되는 함수형 컴포넌트에서 state의 값을 유지하고 사용하기 위해서 리액트는 클로저를 활용하고 있다.
- 실제 리액트 코드에서는 useReducer를 이용해 구현되어 있다.
- 게으른 초기화
- 초깃값이 복잡하거나 무거운 연산을 포함하고 있을 때 사용
- localStorage, sessionStorage
useEffect
- 알려진 것처럼 생명주기 메서드를 대체하기 위한 훅도 아니다.
- 컴포넌트의 여러 값들을 활용해 동기적으로 부수 효과를 만드는 메커니즘이다.
- 관찰하는 것이 아니라 state나 props의 변화 속에서 일어나는 렌더링 과정에서 실행되는 부수 효과 함수라고 볼 수 있다. -> 함수형 컴포넌트는 매번 함수를 실행해 렌더링을 수행하기 때문이다.
CleanUp
- 언마운트라기 보다는 이전의 값을 기준으로 실행되는, 이전 상태를 청소해 주는 개념으로 보는 것이 옳다.
기명함수 사용하기
- 관리해야 할 useEffect의 수가 많아지면 파악하기 어려워지기 때문이다.
useMemo
useCallback
useRef
- 그 값이 변하더라도 렌더링을 발생시키지 않는다.
- 컴포넌트가 렌더링될 때만 생성되며, 컴포넌트 인스턴스가 여러 개라도 각각 별개의 값을 바라본다.
- 내부는 렌더링에 영향을 미치면 안되기 때문에 useMemo로 구현되어 있다.
useContext
- 부모 컴포넌트가 렌더링되면 하위 컴포넌트는 모두 리렌더링된다
- 단순히 상태를 주입할 뿐 그 이상의 기능도, 그 이하의 기능도 하지 않는다.
- 렌더링 최적화에 아무런 도움이 되지 않는다.
useReducer
- 좀더 복잡한 형태의 state를 사용할 때
- 결국 클로저를 활용해 값을 가둬서 state를 관리한다는 사실에는 변함이 없다.
useImperativeHandle
- ref를 받고자하는 컴포넌트에서 forwardRef로 감싸고 두 번째 인수로 ref를 전달받는다.
- useImperativeHandle을 사용해서 ref에 대한 추가 동작을 정의, 두 번째 인수로 useEffect의 deps와 같은 의존성 값을 넘겨준다.
useLayoutEffect
- 리액트다 DOM을 업데이트
- useLayoutEffect를 실행
- 브라우저에 변경 사항을 반영
- useEffect를 실행
useDebugValue
고차 컴포넌트 vs 커스텀 훅
- 렌더링 결과물에 영향을 줄 때는 고차 컴포넌트, 공통 로직을 격리할 때는 커스텀 훅을 사용하는 방향이 좋아 보인다.