lyuna's story

usetransition이란? 리액트 자바스크립트 라이브러리에서 사용하는 훅 중 하나로, UI를 차단하지 않고 상태를 업데이트 할 수 있으며 사용자가 느끼는 반응성을 개선하기 위해 사용된다.특정 작업이 오래 걸릴 때 사용자에게 더 부드럽게 보이도록 하는데 도움을 준다. const[isPending, startTransition] = useTransition(); useTransition은 두개의 항목이 있는 배열을 반환한다.1.isPending : 플래그는 대기중인 transition이 있는지 알려준다.2.startTransition : 함수는 상태 업데이트(setState) 를 transition으로 표시해주는 함수이다. useTransition는 어떤 경우에 사용할까? 성능이 좋지 않게 되면 빠른 업..

useDefferedValue란? 특정 값의 업데이트를 지연시키면서, UI가 더 부드럽게 업데이트 되도록 도와준다. 이를 통해 사용자는 브라우저가 작업을 완료하기를 기다리지 않고, 즉각적인 반응을 경험할 수 있다. 주로 사용자가 입력을 하거나, 스크롤 할 때 처럼 빠르게 변화하는 값을 처리할 때 유용하다. useDeferredValueUI 일부 업데이트를 지연시킬 수 있는 리액트 훅const deferredValue = useDeferredValue(value)  레퍼런스 컴포넌트의 최상위 레벨에서 useDefferedValue를 호출하여 지연된 버전의 값을 가져온다import { useState, useDeferredValue } from 'react';function SearchPage() { co..

useTransition이란? React에서 비동기 작업을 처리할 때 유용한 Hook이다. 주로 사용자 인터페이스(UI)가 즉각적으로 반응하면서도, 시간이 걸리는 작업을 백그라운드에서 처리하고 싶을 때 사용된다. 이 Hook을 사용하면 사용자 경험을 개선할 수 있다. 쉽게 말해, 무거운 작업을 실행하더라도 UI가 매끄럽게 반응하도록 도와준다.  레퍼런스 컴포넌트의 최상위에서 useTransition을 호출하여 일부 state업데이트를 Transition으로 표시. import { useTransition } from 'react';function TabContainer() { const [isPending, startTransition] = useTransition(); // ...}  반환값 use..

useMemo useMemo는 리액트에서 컴포넌트의 성능을 최적화 하는데 사용되는 훅입니다. useMemo에서 memo는 memoization을 뜻하는데 해석하자면 '메모리에 넣기' 라는 의미로컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술입니다. 쉽게 말해서 , 동일한 값을 반환하는 함수를 반복적으로 호출해야 하는 경우처음 값을 계산할 때 해당 값을 메모리에 저장해 필요할 때 마다 다시 계산하지 않고 메모리에서 꺼내 재사용하는 것입니다.  useMemo의 구조에 대해 간단하게 살펴봅시다const value = useMemo(() => { return calculate();}. [item..

useCallback이란? useCallback은 React에서 성능 최적화를 위해 사용하는 훅으로 , 메모이제이션(memoization)된 콜백 함수를 반환하는 역할을 한다.즉, 함수의 재사용을 도와 불필요한 함수 재생성을 방지한다.레퍼런스 리렌더링 간에 함수 정의를 캐싱하려면 컴포넌트의 최상단에서 useCallback을 호출import { useCallback } from 'react';export default function ProductPage({ productId, referrer, theme }) { const handleSubmit = useCallback((orderDetails) => { post('/product/' + productId + '/buy', { refer..

다른 Hook 의 종속성 메모화 컴포넌트 본문에서 직접 생성된 객체에 의존하는 연산이 있다고 가정하자.function Dropdown({ allItems, text }) { const searchOptions = { matchMode: 'whole-word', text }; const visibleItems = useMemo(() => { return searchItems(allItems, searchOptions); }, [allItems, searchOptions]); // 🚩 주의: 컴포넌트 본문에서 생성된 객체에 대한 종속성 // ... 이렇게 객체에 의존하는 것은 메모이제이션의 목적을 무색하게한다. 컴포넌트가 다시 렌더링 되면 컴포넌트 본문 내부의 모든 코드가 다시 실행되기 때문이..

useMemo 란?React에서 성능 최적화를위해 사용하는 훅이다.컴포넌트가 화면에 그려질 때, 어떤 계산이 매우 오래 걸리거나 많은 자원을 사용할 수 있다.이런 계산을 자주 하면 앱이 느려질 수 있는데 useMemo는 이런 계산을 효율적으로 처리할 수 있도록 도와준다.  레퍼런스 컴포넌트의 최상위 레벨에 있는 'useMemo'를 호출하여 재렌더링 사이의 계산을 캐싱한다. import { useMemo } from 'react';function TodoList({ todos, tab }) { const visibleTodos = useMemo( () => filterTodos(todos, tab), [todos, tab] ); // ...} 매개변수 계산 함수 ('calculateValu..

useEffect란? 리액트 컴포넌트가 렌더링 될 때 마다 특정 작업을 실행할 수 있도록 하는 Hook. 오래걸리는 코드(또는 렌더링과 상관없는)를 나중에 실행하게 해 준다 컴포넌트가 mount 됐을 때, 컴포넌트가 unmount 됐을 때, 컴포넌트가 update 됐을 때 특정 작업을 처리할 수 있다. 컴포넌트는 라이프 사이클 (생명주기)를 가지고 있다. mount:컴포넌트가 처음으로 화면에 렌더링 되는 시점 update: 화면을 업데이트 하는 것(count:0 ->1로 변경) unmount: 더이상 필요하지 않은 컴포넌트가 화면에서 제거되는 시점  간단한 사용예제를 통해 useEffect 사용법을 알아보자! useEffect 사용 예제 import React, { useState, useEffect }..

useLayoutEffect란? 새로운 글을 클릭하거나 메뉴를 열 때 페이지가 변하는 것을 주목했는가? 이것은 웹 개발자들이 "렌더링"이라고 하는 프로세스에 의해 가능해진다. 이 프로세스는 웹 페이지의 내용을 업데이트 하고 새로운 정보를 보여주는 역할을 한다. 여기서 useLayoutEffect라는 것이 나온다. 이것은 React라는 프레임워크에서 사용되는 특별한 기능 중 하나이다. useLayoutEffect는 렌더링이 일어나기 전에 특정 작업을 수행하는 데 사용된다. 간단히 말해서 useLayoutEffect는 페이지가 업데이트 되기 전에 어떤 일을 처리할 수 있는 것으로 일종의 준비작업 이라고 할 수 있다.페이지가 업데이트 되기 전에 필요한 작업들을 처리해 놓는 것이다.  참조 브라우저가 화면을 다..

커스텀 훅으로 Effect 감싸기 Effect는 탈출구이다. 리액트를 벗어나야 할 때, 또는 더 나은 빌트인 솔루션이 없을 때 사용한다. Effect를 수동으로 작성해야 하는 경우가 자주 발생한다면 이는 컴포넌트가 의존하는 일반적인 동작에 대한 커스텀 훅을 추출해야 한다는 신호일 수 있다. 예를 들어 이 useChatRoom에 커스텀 훅은 Effect의 로직을 보다 선언적인 API 뒤에 숨긴다. function useChatRoom({ serverUrl, roomId }) { useEffect(() => { const options = { serverUrl: serverUrl, roomId: roomId }; const connection = createConnecti..