[React] useLayoutEffect()

---

useLayoutEffect()

React Hooks Lifecycle

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() 함수를 사용한다면 더 나은 결과를 얻을 수 있습니다.
감사합니다.