React useEffect vs useLayoutEffect 차이점 알아보기

React를 사용하며 아마 가장 많이 사용하는 Hook을 말하라면 무조건 순위권 안에 들 Hook은 useEffect일 것입니다.

하지만 아래의 Flow 그림에서 보면 useEffect 이외에 useLayoutEffect라는 hook이 있다는 것을 알 수 있습니다.

React Hook Flow Diagram

둘의 차이는 간단하게 설명 가능합니다.

Dom이 화면을 그린 뒤 호출되는 것이 useEffect 화면을 그리기 전에 호출되는 것이 useLayoutEffect입니다.

 

이렇게 말하면 와닿지 않을 수 있을 수 있겠지만 React내에서의 깜빡임 문제를 해소하려고 검색할 경우 가장 많이 나오는 것이 useLayoutEffect입니다.

 

아래의 코드를 살펴봅시다.

import React, { useEffect, useState } from 'react';

const Test: React.FC = () => {
  const [name, setName] = useState('');
  const [age, setAge] = useState(0);
  useEffect(() => {
    setName('김철수');
    setAge(33);
  }, []);
  return (
    <div style={{ fontSize: '24rem' }}>
      안녕! 내 이름은 {name}이고, 나이는 {age}살이야!
    </div>
  );
};

export default Test;

위와 같은 상황은 자주 발생하고 이 상황에서는 순간적이긴 하지만 이름은 빈 문자열이, 나이는 0이 보였다가 변경됩니다.

useEffect 예시

그에 반해 useLayoutEffects는 Dom 화면을 그리기 전에 동기적으로 실행하기 때문에 이런 문제에서 자유롭습니다.

import React, { useLayoutEffect, useState } from 'react';

const Test: React.FC = () => {
  const [name, setName] = useState('');
  const [age, setAge] = useState(0);

  useLayoutEffect(() => {
    setName('김철수');
    setAge(33);
  }, []);

  return (
    <div style={{ fontSize: '24rem', margin: 80 }}>
      안녕! 내 이름은 {name}이고, 나이는 {age}살이야!
    </div>
  );
};

export default Test;

useLayoutEffect 예시

이렇게 새로고침을 했을 때 깜빡이는 증상이 없어졌습니다.

 

다만 useLayoutEffect 역시 Serverside가 아닌 Cliendside이기 때문에 그 부분을 유의해 사용해야 되며, Serverside의 단점과 동일하게 로직의 복잡도가 너무 높다면 Dom을 그리는데 너무 긴 시간이 걸리는 단점도 존재합니다.

 

그러니 기본적으로는 항상 useEffect를 사용하고 사용자 경험을 망치는 특정 상황에서만 간단하게 사용하기를 권장합니다.