전체 글

카나리아 테스트 useOptimistic 훅은 현재 React의 Canary과 실험실 채널에서만 사용할 수 있어요. 리액트의 릴리즈된 채널에 대해서 알아보려면 여기를 눌러주세요. useOptimistic은 UI를 낙관적으로 업데이트해주는 리액트 훅이에요. const [optimisticState, addOptimistic] = useOptimistic(state, updateFn); Reference | 레퍼런스 useOptimistic(state, updateFn) useOptimistic는 비동기 작업이 진행 중인 동안 다른 상태를 보여주는 리액트 훅이에요. useOptimistic은 인자로 어떤 상태를 받고, 네트워크 요청과 같은 비동기 작업이 지속되는 동안 달라질 수 있는 상태의 복사본을 반환해요..

useMemo는 리렌더링 사이에 계산 결과를 캐싱해주는 리액트 훅이에요. const cachedValue = useMemo(calculateValue, dependencies) Reference | 레퍼런스 useMemo(calculateValue, dependencies) 리렌더링 사이에 계산을 캐싱하고 싶다면 최상위 컴포넌트에서 useMemo를 호출하세요. import { useMemo } from 'react'; function TodoList({ todos, tab }) { const visibleTodos = useMemo( () => filterTodos(todos, tab), [todos, tab] ); // ... } Parameters | 파라미터(매개변수) calculateValue :..

함정 useLayoutEffect는 성능 저하를 유발할 수 있어요. 가능하다면 useEffect를 사용하세요. useLayoutEffect는 useEffect의 한 종류로 브라우저가 화면을 리페인트하기 전에 실행돼요. useLayoutEffect(setup, dependencies?) Reference | 레퍼런스 useLayoutEffect(setup, dependencies?) 브라우저가 화면을 리페인트하기 전에 레이아웃을 측정하려면 useLayoutEffect를 호출하세요. import { useState, useRef, useLayoutEffect } from 'react'; function Tooltip() { const ref = useRef(null); const [tooltipHeight,..