애드블럭 종료 후 보실 수 있습니다.

ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • React useEffect vs useLayoutEffect 차이점 알아보기
    React 2022. 12. 15. 16:29
    728x90
    반응형

    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를 사용하고 사용자 경험을 망치는 특정 상황에서만 간단하게 사용하기를 권장합니다.

     

    반응형

    댓글

Designed by Tistory.