useTransition은 UI를 방해하지 않고 상태를 업데이트해주는 리액트 훅이에요. const [isPending, startTransition] = useTransition() Reference | 레퍼런스 useTransition() 상태의 업데이트를 트랜지션으로 표시하려면 최상위 컴포넌트에서 useTransition를 호출하세요. import { useTransition } from 'react'; function TabContainer() { const [isPending, startTransition] = useTransition(); // ... } Parameters | 파라미터(매개변수) useTransition은 매개변수가 필요하지 않아요. Returns | 반환값 useTransit..
리액트 공식문서 | React Docs/Reference > react@18.2.0
useSyncExternalStore은 외부 저장소를 구독할 수 있도록 만들어주는 리액트 훅이에요. const snapshot = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot?) Reference | 레퍼런스 useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot?) 외부 데이터 저장소의 값을 읽어오고 싶다면 최상위 컴포넌트에서 useSyncExternalStore을 호출하세요. import { useSyncExternalStore } from 'react'; import { todosStore } from './todoStore.js'; function TodosApp() { c..
useState는 컴포넌트에 상태 변수를 추가하는 리액트 훅이에요. const [state, setState] = useState(initialState); Reference | 레퍼런스 useState(initialState) 상태 변수를 선언하고 싶다면 최상위 컴포넌트에서 useState(initialState)를 호출하세요. import { useState } from 'react'; function MyComponent() { const [age, setAge] = useState(28); const [name, setName] = useState('Taylor'); const [todos, setTodos] = useState(() => createTodos()); // ... } 배열을 구조분..
useRef는 렌더링을 할 필요가 없는 값을 참조할 수 있게 해주는 리액트 훅이에요. const ref = useRef(initialValue) Reference | 레퍼런스 useRef(initialValue) ref를 선언하고 싶다면 최상위 컴포넌트에서 useRef를 호출하세요. import { useRef } from 'react'; function MyComponent() { const intervalRef = useRef(0); const inputRef = useRef(null); // ... } Parameters | 파라미터 initialValue : ref 객체의 current 속성이 최초로 지정될 값. 타입은 상관이 없어요. 이 인자는 최초 렌더링 이후에는 무시돼요. Returns | ..
useReducer는 컴포넌트에 리듀서(reducer)를 추가해주는 리액트 훅이에요. const [state, dispatch] = useReducer(reducer, initialArg, init?) Reference | 레퍼런스 useReducer(reducer, initialArg, init?) 리듀서로 상태를 관리하기 위해서는 최상위 컴포넌트에서 useReducer를 호출하세요. import { useReducer } from 'react'; function reducer(state, action) { // ... } function MyComponent() { const [state, dispatch] = useReducer(reducer, { age: 42 }); // ... Parameter..
카나리아 테스트 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,..
함정 useInsertionEffect는 CSS-in-JS 라이브러리 저자들을 위한 훅이에요. CSS-in-JS 라이브러리로 작업하지 않거나, 스타일을 주입할 공간이 필요하지 않으면 아마도 useEffect나 useLayoutEffect를 사용하는 게 좋아요. useInsertionEffect는 어떤 레이아웃 이펙트가 실행되기 이전에 DOM에 엘리먼트를 추가해줘요. useInsertionEffect(setup, depencies?) Reference | 레퍼런스 useInsertionEffect(setup, dependencies?) 레이아웃을 읽는 이펙트가 실행되기 전에 스타일을 삽입하려면 useInsertionEffect를 호출하세요. import { useInsertionEffect } from '..
useImperativeHandle은 ref로 노출되는 핸들을 커스터마이징할 수 있도록 해주는 리액트 훅이에요. useImperativeHandle(ref, createHandle, dependencies?) Reference | 레퍼런스 useImperativeHandle(ref, createHandle, dependencies?) 노출된 ref 핸들을 커스터마이징하려면 최상위 컴포넌트에서 useImperativeHandle을 호출하세요. import { forwardRef, useImperativeHandle } from 'react'; const MyInput = forwardRef(function MyInput(props, ref) { useImperativeHandle(ref, () => { r..
