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 }를 반환한다. refstateuseRef(initialValue)는 { current: initialValue }을 반환useState(initialValue)는 state 변수의 현재값과 state 설정자 함수([value, setValue])를 반환Mutable → 렌더링 프로세스 외부에서 curren..