https://github.com/donavon/hook-flow

최근 깃허브 스타 1k를 돌파한 hook-flow 라는 프로젝트가 있습니다.

리액트 훅의 모호한 실행 순서가 보기좋게 정리되어 있습니다.

그런데 이상하게도, LayoutEffects 라는 낯선 이름이 하나 보이는데, 이 useLayoutEffect hook 라는 생소한 훅을 소개해 보겠습니다.

useLayoutEffect

*useLayoutEffect 를 IntelliSense(지능형 코드 완성)가 자동으로 완성한 모습입니다.*

그런데 어디서 많이 본 형태 아닌가요? 맞습니다. useEffect 와 useLayoutEffect 훅의 형태는 완전히 동일합니다.

그럼 이 둘의 차이점이 무엇인지 알아보도록 하겠습니다.

useLayoutEffect(() => {
	/* effect(동기 side-effect) */
	return () => { cleanup };
}, [input])

useEffect(() => {
	/* effect(비동기 side-effect) */
	return () => { cleaup };
}, [input])

이펙트(effect)의 호출 시기

<aside> 💡 *componentDidMount 와 componentDidUpdate 와는 다르게, useEffect 로 전달된 함수는 지연 이벤트 동안에 레이아웃 배치와 그리기를 완료한 후 발생합니다.*

이것은 구독이나 이벤트 핸들러를 설정하는 것과 같은 다수의 공통적인 side-effect에 적합합니다. 왜냐면 대부분의 작업이 브라우저에서 화면을 업데이트하는 것을 차단해서는 안 되기 때문입니다.

</aside>

잠깐 리액트 공식 문서 중 useEffect 의 설명을 짚고 가겠습니다.

*useEffect hook 을 사용할 경우 DOM의 레이아웃 배치와 페인트가 끝난 후 이펙트 함수를 호출하는데, 따라서 상태(state) 값이 이펙트에 의존할 경우 약간 불편한 사용자 경험으로 이어질 수 있습니다.*

import { useEffect, useState } from "react";

function App() {
  const [age, setAge] = useState(0);
  const [name, setName] = useState("");
  
  useEffect(() => {
    setAge(21);
    setName("Ellie");
  }, []);
  
  return (
    <>
      <div className="App">{`이름: ${name},  나이: ${age}`}</div>
    </>
  );
}

export default App;