Per ardua ad astra.

useLayoutEffect 훅들어가며리액트(React.js)의 @useLayoutEffect@ 훅에 대해 간단히 정리해본다. useLayoutEffect 훅개념컴포넌트가 렌더링되기 직전, 즉 브라우저가 화면을 그리기 전에 실행되는 훅화면에 변화가 나타나기 전에 어떠한 처리를 하고 싶을 때 사용한다. 사용 방법import { useLayoutEffect } from 'react';useLayoutEffect(() => { // 레이아웃 관련 변경, 동기적 DOM 조작 등에 사용한다.}, [dependencies]); useEffect 훅과 비교하기항목useEffect 훅useLayoutEffect 훅실행 시점컴포넌트 렌더링 후, 브라우저가 화면을 그린 뒤컴포넌트 렌더링 직후, 브라우저가 화면을 그리기 ..

useEffect와 useCallback들어가며리액트에서 사용되는 @useCallback@과 @useEffect@에 대해 알아보자. @useCallback@리액트에서 함수를 메모이제이션(Memoization)하는 데 사용된다.불필요한 함수의 재생성을 방지하고, 함수가 의존하는 값이 변경될 때만 새로운 함수를 생성하도록 할 수 있다. 예제 코드아래의 코드에서 @handleClick@ 함수는 @count@ 변수가 변경될 때만 재생성 된다.그렇지 않을 경우 @handleClick@ 함수는 재생성되지 않으며, 같은 함수를 계속 사용하게 된다.이렇게 할 경우 함수의 재생성을 최소화하여 성능 최적화를 하는데 도움을 줄 수 있다.import React, { useCallback, useState } from 'rea..

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