Hook API 참고서

Hook API 참고서

기본 Hook

useState

const [state, setState] = useState(initialState);

상태 유지 값과 그 값을 갱신하는 함수를 반환합니다. 처음 렌더링 하는 동안, 반환된 state와 첫번째 전달된 인자의 값은 같습니다. setState는 리렌더링시에도 변하지 않아, useEffect와 useCallback의 의존성목록에 추가하지 않아도 됩니다.

useEffect

useEffect(didUpdate)

명령형 또는 어떤 effect를 발생시키는 함수를 인자로 받습니다. 화면에서 제거될 때 setTimeout과 같은 것들을 제거하기 위해서는 clean-up함수를 반환하면 됩니다.

조건부 발생시키기

useEffect(()=>{}, [])

useEffect에 2번째 인자 전달을 통해 의존성값을 추가해 조건부로 발생시킬 수 있습니다.

useContext

context 객체를 받아 그 context의 현재 값을 반환합니다.현재 값은 hook을 호출하는 컴포넌트에서 가장 가까이에 있는 <MyContext.Provider>의 value prop에 담겨있습니다.

만약 MyContext.Provider가 갱신되면 이 Hook은 가장 최신의 context value를 사용하여 렌더러를 발생시키는데, 이때 React.memo나 shouldComponentUpdate를 사용하더라도 useContext를 사용하고 있는 컴포넌트에서부터 다시 렌더링합니다.

---

useReducer

useState의 대체함수로 다수의 하윗값을 포함하는 복잡한 정적로직을 만드는 경우나 다음 state가 이전 state에 의존적인 경우에 사용합니다.

useCallback

const memoizedCallback = useCallback(()=>{ doSomething(a,b);}, [a, b]);

메모이제이션된 콜백을 반환합니다. useCallback(fn, deps)는 useMemo(()⇒fn, deps)와 같습니다.

useMemo

메모이제이션된 값을 반환합니다.

useRef

const refContainer = useRef(initialValue);

.current 프로퍼티로 전달된 인자로 초기화된 변경간으한 ref객체를 반환하며, 컴포넌트 생명주기 동안 유지됩니다.

useImperativeHandle

ref를 사용할 때 부모 컴포넌트에 노출되는 인스턴스값을 커스텀합니다.

function FancyInput(props, ref){
	const inputRef = useRef();
	useImperativeHandle(ref, () => ({
		focus: () => {
			inputRef.current.focus();
		}
}));
return input <input ref={inputRef} .../>;
}
FancyInput =  forwardRef(FancyInput);

ㅇ   컴포넌트는 inputRef.current.focus()를 호출 할 수 있습니다.

useLayoutEffect

기본적으로 useEffect와 동일하지만, 브라우저가 화면을 그리기 이전 시점으로 동기적으로 실행됩니다.

useDebugValue

useDebugValue(value)

React 개발자도구에서 사용자 Hook레이블을 표시하는데 사용

디버그 값 포맷팅 지연하기

옵션 두 번째 파라미터로 포맷팅 함수를 전달해서 포맷팅 비용 감축

useDeferredValue

const deferredValue = useDeferredValue(value)

지금까지는 debounce와 throttle으로 렌더링 성능을 향상시켰지만, deferredValue를 사용하면 낮은 우선순위를 지정할 수 있는 훅이다. useTransition과 차이점은 useTransition은 함수 실행의 우선순위를 지정하고 useDeferredValue는 값의 업데이트 우선순위를 지정한다.

Memoizing deferred children

function Typehead(){
	const query = useSearchQuery("");
	const deferredQuery = useDeferredValue(query);
	
	const suggestions = useMemo(()=>
		<SearchSuggestions query={deferredQuery} />,
		[deferredQuery]
	);

	return (
		<>
			<SearchInput query={query} />
			<Suspense fallback="loading">
				{suggestions}
			</Suspense>
		</>
	);
}

위의 코드는 deferredQuery가 변경되었을 때만 렌더링이 발생하도록 한다.

useTransition

const [isPending, startTransition] = useTransition();

startTransition을 통해서 함수의 우선순위를 낮출 수 있습니다. isPending은 로딩중인지 알 수 있습니다.

useId

const id = useId();

useId는 서버와 클라이언트간에 고정되지 않기 때문에 hydration에서 불일치를 에러가 발생할 수 있습니다. 또한 key에도 사용하지 않는 것이 좋습니다.

Library Hooks

useSyncExternalStore

const state = useSyncExternalStore(subscribe, getSnapshot[, getServerSnapshot]);

externalStore(redux, mobx…)와 synchronize하겠다는 훅입니다.

external state의 변경사항을 관찰하고 있다가 tearing이 발생하지 않도록 상태 변경이 관찰되면 다시 렌더링을 시작합니다.

• subscribe: store가 변경되었을 때 호출할 callback 함수
• getSnapshot: store의 현재 값을 리턴하는 함수
• getServerSnapshot: 서버사이드 렌더링 시 가지고 있던 snapshot을 리턴하는 함수

참고

useInsertionEffect

useInsertionEffect(didUpdate);

useLayoutEffect가 동작하기전에 스타일을 먼저 조작하게 해주는 훅입니다.

css-in-js의 문제점

css라이브러리는 새 규칙을 생성하고 style태그와 함께 문서에 삽입하는데 라이브러리에 성능영향을 줄 수 있어 <style>을 넣을 곳을 알아야 합니다.

useLayoutEffect의 경우 DOM에서 레이아웃을 읽고 동기적으로 다시 렌더링하는데 사용되는데, 이를 사용하여 스타일 삽입 시 레이아웃이 단일 렌더링에서 여러 번 계산되고, 삽입전에 하나의 훅이 레이아웃을 읽으려고 하면 잘못된 것을 읽을 수 있습니다.

useInsertionEffect의 경우 useEffect와 동일하지만, 모든 DOM 조작 전에 동기적으로 실행됩니다. useLayoutEffect에서 레이아웃을 읽기 전에 <style>또는 SVG<defs>와 같은 전역 DOM노드를 삽입하는데 사용해야 합니다.