useTransition이란?useTransition은 React 18에서 추가된 기능으로 사용자 인터페이스(UI)에서 느린 업데이트를 처리하는 데 사용되는 훅이다.사용자가 어떤 작업을 수행했을 때, 이 작업이 완료되기 전까지 UI를 즉시 업데이트하는 대신, 이 작업을 '비동기'로 처리하고, 사용자에게 이 작업이 진행 중임을 알려주는 역할을 한다.useTranstion의 형태const [isPending, startTransition] = useTransition();useTransition을 사용하면 UI의 응답성을 높이고, 느린 작업이 전체 UI를 블록하는 것을 방지할 수 있다.코드로 알아보기문제가 되는 코드'use client';import { ChangeEvent, useState } from '..
Stack/React
useDeferredValue는 React 18에서 훅이다.useDefferdValue는 복잡하거나 무거운 렌더링 작업에서 유용하게 사용할 수 있다.useDeferredValue는 값을 지연시켜, 작업동안의 UI의 응답성을 유지할 수 있도록 돕는다.useDeferredValue의 개념useDeferredValue는 값이 즉시 업데이트되지 않아도 될 때 사용된다.예를 들어, 사용자가 텍스트를 입력할 때, 입력된 텍스트를 기반으로 검색 결과를 보여주는 컴포넌트가 있다고 가정했을때, 사용자가 빠르게 타이핑할 때마다 검색 결과를 업데이트하는 것은 불필요한 작업이 된다. 이러한 경우에 useDeferredValue를 사용하여 텍스트 입력에 딜레이를 주어 불필요한 렌더링을 방지한다.코드로 알아보기ResultList..
useId란?useId 는 React18 에서 추가된 기능이다.useId는 react의 고유한 Id를 만들때 사용하는 훅이다.const id = useId();useId로 만든 Id는 form같은 요소에서 접근성 관련으로 사용한다.코드로 알아보기'use client';import { useId } from 'react';const UseIdEx = () => { return ( 이름 );};export default UseIdEx;다음과 같은 코드에서 라벨에 있는 내용을 클릭하면 input값이 선택되는 코드이다.문제가 되는 경우'use client';import { useId } from 'react';const UseIdEx = () => { const id = ..
useReducer 란?useReducer는 useState와 동일하게 state값을 관리하는데 사용한다.다만 useReducer는 여러개의 하위값을 포함하는 state를 관리할때 사용한다.{ username: 'Wonyoung', email: 'wonyoung@example.com', hobbies: ['reading', 'traveling', 'coding'], friends: [ { name: 'Alice', age: 25 }, { name: 'Bob', age: 30 } ], notifications: [ { id: 1, message: 'Welcome to the platform!', read: false }, { id: 2, message: 'Your pro..
useLayoutEffect란?useLayoutEffect와 useEffect는 거의 비슷한 역할을 한다.useEffect(() => { //...}, [state]) useLayoutEffect(() => { //...}, [state]) 구조도 비슷하고 기능도 비슷한데 다른점은 effect가 실행되는 시점이다.useEffect의 경우 화면이 업데이트된 이후에 effect가 실행된다.useLayoutEffect는 effect 실행 이후에 화면이 업데이트가 된다.useLayoutEffect를 통해 생기는 이점은 effect를 먼저 실행하기 때문에 사용자가 보는 UI를 보다 정교하게 보일 수 있다.코드로 알아보기'use client';import { useEffect, useLayoutEffec..
useCallback 이란?useCallback 은 useMemo와 달리 값을 저장하는게 아닌 함수 그 자체를 memoization 해준다.const calculate = useCallback((num) => {return num + 1;} , [item]}코드가 다음과 같다면 num + 1 의 내용의 함수를 메모리에 저장하여 필요할때 마다 가지고 와서 사용한다.Javascript 에서 함수는 사실 객체의 한 종류이다.useCallback 의 구조const calculate = useCallback( 함수 , 의존성 배열}useCallback 은 위의 구조와 같은 형태를 가지고 있다.여기서 함수는 메모리에 저장되는 함수로 (num) => {return num + 1;} 라는 함수가 메모리에 저장된다. 이..
