내가 레퍼런스가 되자 내가 레퍼런스가 되자

이전 useState와 useRef를 비교하는 포스팅에서 useState의 값의 변화와 re-render의 과정이 비동기적으로 이루어진다고 했는데 useState의 set에서 함수형 업데이트를 통해 동기적으로 사용하는 방식에 대해 살펴보려 합니다. useState 비동기적 set 함수예시코드를 간단하게 확인해보겠습니다.import { useState } from "react";function HooksTest() { const [count, setCount] = useState(0); const updateCount = () => { setCount(count + 1); setCount(count + 1); setCount(count + 1); }; return ( ..

React 18버전에서 새로 나온 hooks인 useTransition을 이번에 사용하게 되어 팀 내에서도 공유하고 포스팅도 하게 되었습니다. useTransition와 비슷한 역할을 가진 useDeferredValue도 같이 알아보겠습니다. useTransition?React 공식 홈페이지에서 useTransition 설명은 다음과 같습니다.useTransition is a React Hook that lets you update the state without blocking the UI.useTransition 은 UI를 차단하지 않고 state를 업데이트할 수 있는 React 훅입니다. useTransition은 파라미터를 받지 않고 isPending, startTransition 두 개의 값을 ..

주니어 개발자분께서 이메일 인증 로직에서 인증 시간을 체크하는 timer의 상태 관리에 useRef가 사용되는 걸 보시곤 "상태 관리에는 useState가 쓰이고 useRef는 DOM에 접근할 때 쓰는 것 아닌가요?"라는 질문을 받았습니다. 간단하게 컴포넌트의 생명주기에 따른 상태와 re-render 유무를 설명드렸고 이번 기회에 해당 내용을 간단하게 정리하려 합니다. useState vs useRef보통 useState는 특정 상태 값을 반환하거나 갱신이 필요할 때, useRef는 특정 DOM에 접근하기 위해 많이 사용합니다. 하지만 리액트 공식문서를 보면 추가로 알 수 있는 내용이 있습니다.useRef returns a mutable ref object whose .current property is..