한우의 개발일기

useRef 파해치기 와 이어집니다useAsync 훅 확인하기useAsync 훅 분석import { useEffect, useRef, useState } from 'react'export function useAsync( func: () => Promise | undefined | null, deps = [],) { const ref = useRef(func) ref.current = func const [value, setValue] = useState() useEffect(() => { ref.current()?.then(setValue) // eslint-disable-next-line react-hooks/exhaustive-deps }, deps) return value..

https://github.com/Bookiwi-hub/flow/blob/deep-dive/apps/reader/src/hooks/useAsync.ts위에 훅을 공부 하던중 비동기 처리를 ref 를 이용하여 위에 훅으로 사용할 수 있는 훅을 만든것을 보았는데 왜 ref를 사용하고 ref 의 동작원리를 잘 모르겠어서 ref에 대해서 공부해 보았습니다.React의 useRef() 훅 내부 동작 분석React의 훅 중 하나인 useRef()의 내부 동작 원리를 깊이 살펴보려고 합니다. React를 사용하다 보면 useRef()를 DOM 요소에 접근하거나 re-render 사이에 값을 유지하기 위해 자주 사용하게 되는데요, 이 훅이 어떻게 작동하는지 내부 메커니즘을 이해하면 더 효과적으로 활용할 수 있습니다.u..

React가 초기 마운트(최초 렌더링)의 수행과정1. Fiber Architecture에 대한 간략한 소개Fiber는 React가 App 상태의 내부 표현을 유지하는 아키텍처입니다. FiberRootNode와 FiberNode들로 구성된 트리와 같은 구조입니다. 여러 종류의 FiberNode가 있으며 그 중 일부는 DOM 노드를 가지고 있는 HostComponent입니다.React 런타임은 Fiber 트리를 유지하고 업데이트하며 최소한의 업데이트로 DOM을 동기화 하려고 하고있습니다여기서 HostComponets란??HostComponent는 React에서 실제 DOM 요소와 직접적으로 매핑되는 컴포넌트를 의미합니다. 쉽게 말해서HTML 요소들이 HostComponent입니다. 예를 들면등이 모두 Hos..

리액트의 내부 개요리액트의 내부 개요는 위와 같은 4단계로 간단히 말할 수 있습니다.트리거이 단계를 'Trigger'라고 명명한 이유는 모든 작업이 여기서 시작되기 때문입니다. 초기 마운트이든 상태 훅에 의한 리렌더링이든 상관없이 이 단계에서 시작됩니다. 이 단계에서는 React 런타임에게 어떤 부분이 렌더링되어야 하는지(scheduleUpdateOnFiber()를 통해)와 어떻게 렌더링되어야 하는지를 알려줍니다.이 단계는 '작업 생성'이라고 생각할 수 있습니다. ensureRootIsScheduled()는 이러한 작업을 생성하는 마지막 단계이며, 이후 scheduleCallback()을 통해 해당 작업이 Scheduler로 전송됩니다.스케줄링이는 React 스케줄러입니다. 기본적으로 우선순위에 따라 작..

watch 와 useWatchReact Hook Form은 React에서 폼을 쉽게 관리할 수 있도록 도와주는 라이브러리입니다. 이 훅폼에는 폼의 상태를 추적하는 데 사용하는 두 가지 함수가 있습니다. 바로 useWatch와 watch 함수입니다.watch 함수watch 함수의 동작watch 함수는 React Hook Form에서 제공하는 중요한 기능으로, 폼 필드의 값들을 실시간으로 관찰(감시)하는 역할을 합니다.주요 기능과 동작 원리기본 사용법// 모든 필드 감시const allValues = watch();// 특정 필드만 감시const titleValue = watch("title");// 여러 필드 감시const { title, description } = watch(["title", "desc..