개발일지

1. useTransition이란?사용자 인터페이스(ui) 업데이트 시 발생하는 렌더링 성능 문제를 해결하기 위해 비동기 전환을 관리하는 데 사용됩니다. 2. useTransition를 왜 사용할까요?기본적으로 useTransition은 상태 업데이트를 '긴급'하지 않은 업데이트로 마킹하여, 사용자 인터페이스가 응답성을 유지하도록 합니다. 긴급하지 않은 업데이트는 다른 긴급한 업데이트가 먼저 처리된 후 실행되므로, 어플리케이션이 더 매끄럽게 작동하게 됩니다.3. 주요 기능1. 응답성 향상: useTransition을 사용하면 긴급하지 않은 상태 업데이트를 비동기로 처리하여 ui가 더욱 부드럽게 반응합니다.2. 비동기 상태관리: useTransition은 두가지 요소를 반환합니다.isPendeing: 전황..

📌 useDeferredValue란?useDeferredValue는 ui 일부의 업데이트를 지연시킬 수 있는 React 훅입니다.const deferredValue = useDeferredValue(value) 📌 useDeferredValue컴포넌트의 최상위 레벨에서 useDeferredValue를 호출하여 지연된 버전의 값을 가져옵니다.import { useState, useDeferredValue } from 'react';function SearchPage() { const [query, setQuery] = useState(''); const deferredQuery = useDeferredValue(query); // ...} 📍 매개변수value: 지연시키려는 값입니다. 어떤 타입..

📌 useTransition이란?useTransition은 ui를 차단하지 않고 state를 업데이트할 수 있는 React 훅입니다.const [isPending, startTransition] = useTransition()📌 useTransition컴포넌트의 최상위 레벨에서 useTransition을 호출하여 일부 state 업데이트를 트랜지션으로 표시합니다.import { useTransition } from 'react';function TabContainer() { const [isPending, startTransition] = useTransition(); // ...} 📍 매개변수useTransition은 매개변수를 받지 않습니다. 📍 반환값useTransition은 정확히 두 ..

1. useMemo란?useMemo는 React의 Hook 중 하나로, 복잡하고 시간이 오래 걸리는 계산을 최적화하는데 사용됩니다. 값이 변경되지 않으면 계산을 반복하지 않게 도와줍니다.2. useMemo를 왜 사용할까요?React에서는 컴포넌트가 재렌더링될 때마다 내부의 모든 코드가 다시 실행됩니다. 만약 계산이 복잡하고 시간이 오래 걸린다면, 이로 인해 성능이 저하될 수 있습니다. useMemo를 사용하면 이런 문제를 해결할 수 있습니다.3. 사용 예제기본 사용법const memoizedValue = useMemo(() => { // 오래 걸리는 계산 return a + b;}, [a, b]); 실습 예제import React, { useMemo } from 'react';function Exam..