React | useLayoutEffect

React

목차

1. useLayoutEffect는 무엇인가요? 🌊
   렌더링할 상태가 이펙트 내에서 초기화되어야 할 경우, 사용자 경험을 위해 useLayoutEffect를 활용(사용자가 깜빡임을 경험하지 않도록 적용함)

1. useLayoutEffect는 무엇인가요?

1. useEffect와 useLayoutEffect

   • useEffect

     • 컴포넌트들이 render와 paint된 후 실행됨
     • 비동기적으로 실행됨
     • paint된 후 실행되기 때문에, useEffect 내부에 DOM에 영향을 주는 코드가 있을 경우 사용자 입장에서는 화면의 깜빡임을 보게됨
       
       
       

     • 데이터 fetch, event handler,state reset 등의 작업에서 사용

       사용 예시

       1. <div>그의 이름은 이며, 나이는 0살 입니다.</div> 를 페인트
       2. 이펙트 내부의 setNumber, setName 호출
       3. 재렌더링 수행 -> <div>그의 이름은 찬민이며, 나이는 25살 입니다.</div>
          

       
       

       import { useEffect, useState } from "react";
       
       function App() {
         const [age, setAge] = useState(0);
         const [name, setName] = useState("");
       
         useEffect(() => {
           setAge(25);
           setName("찬민");
         }, []);
       
         return (
           <>
             <div className="App">{`그의 이름은 ${name} 이며, 나이는 ${age}살 입니다.`}</div>
           </>
         );
       }
       
       export default App;
       

       
       

• useLayoutEffect

  • 컴포넌트들이 render된 후 실행되며 그 이후에 paint가 됨
  • 동기적으로 실행됨
  • paint가 되기 전에 실행되기 때문에 DOM을 조작하는 코드가 존재하더라도 사용자는 깜빡임을 경험하지 않음
    
    
    

  • 화면이 깜빡거리는 상황일 때

    사용 예시

    1. 레이아웃 이펙트 내부의 setNumber, setName 호출
    2. <div>그의 이름은 찬민이며, 나이는 25살 입니다.</div> 를 페인트
       

    
    

      import { useLayoutEffect, useState } from "react";
    
      function App() {
        const [age, setAge] = useState(0);
        const [name, setName] = useState("");
    
        useLayoutEffect(() => {
          setAge(25);
          setName("찬민");
        }, []);
    
        return (
          <>
            <div className="App">{`그의 이름은 ${name} 이며, 나이는 ${age}살 입니다.`}</div>
          </>
        );
      }
    
      export default App;
    

* 내부의 코드가 모두 실행된 후 paint 작업을 거치기 때문에 로직이 복잡할 경우 사용자가 레이아웃을 보는데까지 오랜 시간이 걸림
-> useEffect 사용을 권장함
* 렌더링할 상태가 이펙트 내에서 초기화되어야 할 경우, 사용자 경험을 위해 useLayoutEffect를 활용

---

출처

useEffect와 useLayoutEffect
useEffect와 useLayoutEffect 예시