[React] useLayoutEffect()
useLayoutEffect()
React Hooks LifeCycle을 보면 마지막에 useEffect()와 useLayoutEffect()가 있습니다.
Function Component에서는 주로 useEffect()를 사용합니다.
그렇다면 useLayoutEffect()는 무엇이며, useEffect()와 어떤 차이가 있을까요?
useEffect() 및 useLayoutEffect() LifeCycle 출처
useEffect()
- render가 완료된 Component가 화면에 출력이 된 후 useEffect() 수행
useLayoutEffect()
- render가 완료된 Component가 화면에 출력되기 전 useLayoutEffect() 수행
이 두가지의 차이점은 함수가 실행되는 순서입니다. 이러한 구조로 특정 상황의 코드에서 조금 더 부드러운 화면을 얻을 수 있게 됩니다.
Example Code
import React, {useState, useEffect, useLayoutEffect} from 'react';
function UseLayoutEffectTest(props) {
const [num, setNum] = useState(null);
// useEffect(() => {
// if(num === null){
// setNum(1000);
// }
// }, [num]);
useLayoutEffect(() => {
if(num === null){
setNum(1000);
}
}, [num]);
return (
<div>
<button onClick={() => setNum(null)}>useLayoutEffect Test</button>
<br/>
{num}
</div>
);
}
export default UseLayoutEffectTest;
- 이 코드는 num이라는 state를 초기화하게 되면 1000이라는 숫자로 다시 변경됩니다. 여기서 useEffect()를 사용할 경우
<button>
을 누르면 순간적으로 깜빡이는 현상을 확인할 수 있습니다. 반면 useLayoutEffect()를 사용할 경우 깜빡이는 현상이 없어지게 됩니다. 이는 함수가 실행되는 순서에서 오는 차이로 발생하는 현상입니다.
마무리
하지만 useLayoutEffect() 함수의 실행 시간이 길어지게 될 경우 화면에 출력되는 시간이 느려지게 됩니다. 따라서 useEffect() 함수를 기본적으로 사용하지만 경우에 따라 useLayoutEffect() 함수를 사용한다면 더 나은 결과를 얻을 수 있습니다.
감사합니다.
Author And Source
이 문제에 관하여([React] useLayoutEffect()), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@qusehdgns/React-useLayoutEffect저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)