Per ardua ad astra.

실시간으로 특정 요소의 길이값 가져오기들어가며리액트애서 실시간으로 특정 요소의 길이값을 가져오는 방법을 알아보자. 방법우선 @useRef@를 이용하여 실시간으로 길이값을 가져올 요소를 지정해준다.import {useRef} from 'react';// ...const horiRef = useRef(null);// ...return ( {/* ... */} ); 다음과 같이 @useEffect@와 @ResizeObserver@를 이용하여 해당 요소의 사이즈값을 실시간으로 가져올 수 있다.import { useEffect } from 'react';useEffect(() => { const resizeObserver = new ResizeObserver((entries) => ..

state와 ref 비교하기들어가며리액트에서 자주 사용되는 @ref@와 @state@를 비교해보자. 비교@useState@를 통해 생성된 객체는 리렌더링 중에 초기화가 되지만, @useRef@를 통해 생성된 객체는 리렌더링 중에 초기화가 되지 않는다.@useState@는 @[value, setValue]@를 반환하고, @useRef@는 @{ current : value }@를 반환한다. @ref@@state@@useRef(initialValue)@는 @{ current: initialValue }@을 반환@useState(initialValue)@는 @state@ 변수의 현재값과 @state@ 설정자 함수@([value, setValue])@를 반환Mutable → 렌더링 프로세스 외부에서 @curren..