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

React base의 프로젝트에서 작업 중 DOM 노드의 크기에 따라 state 값이 바뀌는 로직을 짜야 되는 경우가 종종 발생합니다. 그럴 때 "useEffect의 dependency에 useRef의 current를 맵핑하는 것이 맞나?"라는 생각을 하게 됩니다. useRef에선 리렌더링이 일어나기 전까진 값의 변화 추적이 안되기 때문에 문제가 발생할 수 있습니다. 해당 케이스에선 어떻게 처리할지 알아보겠습니다. useEffect dependency로 ref 연결 케이스 확인을 위한 예시코드를 작성해보겠습니다. import { useEffect, useRef, useState } from 'react'; ... function Component() { const [isBasicState, setIsBa..

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