요약
React hook이란 함수형 컴포넌트에서 React의 state와 생명주기 기능을 연동할 수 있게 해주는 함수이다.
프로그래밍에서 Hook
원래 존재하는 어떤 기능에 갈고리를 거는 것 처럼 끼어 들어가 같이 수행하는 것
React hook
함수형 컴포넌트에서 React의 state와 생명주기 기능을 연동할 수 있게 해주는 함수
React hook이 도입되기 전까지는 클래스형 컴포넌트에서만 state와 생명주기 기능을 사용할 수 있었고, 함수형 컴포넌트에서는 사용이 불가능했다.
hook의 이름은 반드시 use로 시작한다.
hook은 javascript 함수이다.
hook의 규칙
- 최상위에서만 Hook을 호출해야 한다.
- 반복문, 조건문 혹은 중첩된 함수 내에서 Hook을 호출하면 안된다.
- early return이 실행되기 전에 항상 React 함수의 최상위에서 호출해야 한다.
- 위 규칙을 통해 렌더링마다 Hook이 동일하게 호출됨이 보장된다.
- 오직 React 함수 내에서만 Hook을 호출해야 한다.
- 일반적인 JavaScript 함수에서 호출하면 안된다.
- React 함수 컴포넌트에서만 호출해야 한다.
- Custom Hook을 이용해 Hook을 호출해야 한다.
hook의 종류
useState, useReducer, useContext, useRef, useImperativeHandle, useEffect, useLayoutEffect, useInsertionEffect, useMemo, useCallback, useTransition, useDeferredValue, useDebugValue, useId, useSyncExternalStore
useState
const [state, setState] = useState(initialState)
컴포넌트에 state 변수를 추가하는 hook
state가 변경될 때마다 리렌더링이 발생하며, 이 때 setState는 비동기로 처리된다.
useEffect
useEffect(setup, dependencies?)
화면이 렌더링될 때 마다 특정 작업을 실행하도록 하는 hook
함수형 컴포넌트에서 side Effect를 사용할 수 있으며 클래스형 컴포넌트의 상태주기에서 사용되는 최초 렌더링과 렌더링 후 업데이트를 합친 형태이다.
의존성배열의 형태에 따라 렌더링의 형태를 조절할 수 있다.
- [ ] = 최초 렌더링 될 때 한번만 실행
- [state, state] = 선언한 상태값들이 업데이트 될 때 실행
- 생략 = 리렌더링마다 반드시 실행
useReducer
const [state, dispatch] = useReducer(reducer, initialArg, init?)
이전 상태와 action을 결합하여 새로운 state를 만드는 hook
복잡한 상태 관리가 필요할 때 useState대신 useReducer를 사용할 수 있다.
dispatch = reducer 함수를 실행시키고, action 객체를 인자로 받으며 action 객체를 통해 컴포넌트 내에서 state의 업데이트를 일으킨다.
reducer = dispatch를 통해 실행하며 컴포넌트 외부에서 state를 업데이트한다. 함수의 인자로 state와 action을 받으며 새로운 state를 반환한다.
useContext
const value = useContext(SomeContext)
Context API를 보다 편하게 사용할 수 있도록 하는 hook
useRef
const refContainer = useRef(initialValue)
DOM 요소에 접근하거나 로컬 변수를 관리하는 용도로 사용하는 hook
변경 가능한 ref 객체를 반환하며, .current 프로퍼티로 전달된 인자를 초기화할 수 있다.
useImperativeHandle
useImperativeHandle(ref, createHandle, [deps])
부모 컴포넌트가 자식 컴포넌트의 메서드나 멤버 변수에 접근할 수 있는 hook
useLayoutEffect
useLayoutEffect(setup, dependencies?)
화면이 브라우저에 의해 그려지기 전에 동기적으로 특정 작업을 실행하도록 하는 hook
useEffect처럼 렌더링이 될 때 동작하는 hook이지만, 동작 시점이 다르다.
useLayoutEffect 내부에서 상태값을 바꾸면 동기적으로 화면이 업데이트된다.
useMemo
const cachedValue = useMemo(calculateValue, dependencies)
재사용된 값을 반환하는 hook
컴포넌트가 최초 렌더링 될 때 실행되며 동일한 연산이 발생할 때 캐시된 데이터를 반환한다.
React에서 최적화를 하기 위한 방법 중 하나로 사용된다.
dependencies의 값의 변화에 따라 동작한다.
useCallback
const cachedFn = useCallback(fn, dependencies)
재사용된 함수를 반환하는 hook
useMemo와 다르게 함수를 캐싱하며 리렌더링이 발생했을 때 불필요한 호출을 방지하기 위해 사용한다.
React에서 최적화를 하기 위한 방법 중 하나로 사용된다.
dependencies의 값의 변화에 따라 동작한다.
useDebugValue
useDebugValue(value, format?)
개발자 도구에서 custom hook의 내부 값을 볼 수 있게 하는 hook
format에 입력된 형태로 value의 변화를 개발자 도구에서 디버깅할 수 있도록 한다.
React18에서 추가된 Hooks
useInsertionEffect
useInsertionEffect(setup, dependencies?)
useLayoutEffect가 동작하기 이전에 스타일을 조작하는 hook
css in JS 라이브러리가 렌더링 도중에 스타일을 삽입할 때 발생하는 성능 문제를 해결한다.
styled-components를 위해 등장했다해도 과언이 아닌 성능 최적화에 도움이 되는 hook이다.
useTransition
const [isPending, startTransition] = useTransition()
상태 값 변화를 시키는 함수의 우선순위를 지정하기 위한 hook
낮은 우선순위로 실행할 함수를 인자로 받으며 해당 함수를 제외한 함수나 상태변화가 모두 동작한 뒤에 실행된다.
startTransition 함수가 동작되기 전에는 isPending이 true이며 동작된 이후에는 false로 변경된다.
이러한 동작 방식으로 로딩바를 구현할 때 사용된다.
useDeferredValue
const deferredValue = useDeferredValue(value)
상태 값 변화의 우선순위를 지정하기 위한 hook
value로 지정한 상태값은 우선순위가 가장 낮아지며 상태변화가 일어날 때 항상 마지막에 동작한다.
useSyncExternalStore
const snapshot = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot?)
저장소에 대한 업데이트를 강제 동기화하여 외부 저장소가 동시 읽기를 지원할 수 있도록 하는 hook
mobx, redux, recoil, jotai, zustand, react query 등의 React hook과 연동된 상태관리 라이브러리들을 외부 저장소라고 한다.
해당 hook은 동시 읽기(concurrent feature)에서 발생하는 tearing 문제를 해결하기 위해 등장했다.
tearing = React 18에서부터 발생하는 문제로, 동시 읽기를 시도했을 때의 데이터를 기준으로 UI를 렌더링하는 과정중에 React가 저장소를 업데이트하면 변경된 데이터를 기준으로 이후 UI를 렌더링하게 되는 UI 불일치 문제
useId
const id = useId()
고유한 ID를 생성하는 hook
id 값을 갖고 있는 컴포넌트를 다양한 곳에서 재사용하게 되면 더이상 해당 id는 고유하다고 판단할 수 없기 때문에 이러한 문제를 해결하기 위해 등장했다.
:r0, :r1과 같이 컴포넌트별로 고유한 ID를 생성한다.