useLayoutEffect 훅

관리 메뉴

한량의 개발블로그

useLayoutEffect 훅 본문

React Hook

useLayoutEffect 훅

Jayce.KIM 2022. 2. 22. 19:10

리액트 실행시 훅 실행 순서

DOM이 브라우저에 페인팅되기 전 LayoutEffects 훅이 실행된다는데, LayoutEffects는 과연 무엇일까?

useLayoutEffect

useLayoutEffect(() => {
  effect
  return () => {
    cleanup
  };
}, [input])

위는 useLayoutEffect를 인텔리센스가 자동으로 완성한 모습이다.

인텔리센스 : vs코드에서 클래스 함수 변수 등을 오른쪽 마우스로 클릭하여 원하는 컨텍스트르 선택할 경우 해당 개체에 대한 정보를 알려주거나 정보가 있는 위치로 이동시키는 것을 말한다. 또한 클래스나 구조체의 변수나 포인터 변수의 오른쪽에 "." 또는 "->"을 타이핑 할 경우 클래스의 멤버함수와 프러퍼티, 구조체의 멤버에 대한 내용이 자동으로 출력된다.

구조가 useEffect 훅과 동일하다

useEffect(() => {
  effect
  return () => {
    cleanup
  }
}, [input])

useEffect 훅을 사용할 경우 DOM의 레이아웃 배치가 끝난 후 이펙트 함수를 호출하는데, 따라서 상태값이 이펙트에 의존할 경우 불편한 사용자 경험으로 이어질 수 있다.

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;

useEffect를 사용한 위 코드는 다음 순서대로 동작한다.

1. <div>그의 이름은 이며, 나이는 0살 입니다. </div> 페인트

2. 이펙트 내부의 setNumber, setName 호출

3. 재렌더링 수행 => <div> 그의 이름은 찬민이며, 나이는 25살 입니다.</div>

물론 위와 같은 간단한 DOM구조라면 금방 렌더링 할 수 있겠지만, 화면이 복잡해지면 체감할 수 있을 정도로 렌더링 시간이 증가하게 된다.

그럼 사용자는 화면에서 "그의 이름은 이며, 나이는 0살입니다"라는 텍스트를 오래 보게 될 것이다.

useLayoutEffect 훅은 바로 이런 문제를 해결하기위해 등장한 훅이다.

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;