🎯 21. useEffect vs useLayoutEffect — 이 둘의 진짜 차이, 이제는 명확하게 알고 싶었다

React에서 상태나 DOM 변경 후에 실행할 사이드 이펙트를 줄 때
우리는 보통 useEffect를 많이 쓰는데,
비슷한 이름의 useLayoutEffect도 있고, 언제 어떤 걸 써야 할지 고민되는 경우가 많았다.

그래서 이번엔 실제 차이점과 사용 기준을 정리해봤다.

---

🧠 기본 개념 먼저 정리

Hook	실행 타이밍
useEffect	렌더링 결과가 실제로 화면에 반영된 후 실행
useLayoutEffect	렌더링이 완료되기 직전, DOM이 그려지기 전 실행

즉, useLayoutEffect는 시각적으로 그려지기 전에 DOM 조작이 가능하다는 게 핵심이다.

---

✅ 코드 흐름으로 이해하기

function MyComponent() {
  useEffect(() => {
    console.log('✅ useEffect 실행');
  });

  useLayoutEffect(() => {
    console.log('⚠️ useLayoutEffect 실행');
  });

  return <div>렌더링 중...</div>;
}

출력 순서:

⚠️ useLayoutEffect 실행  
✅ useEffect 실행

• 둘 다 마운트 이후 실행되지만,
• useLayoutEffect가 먼저 실행되고 → 그 다음에 화면이 그려짐 → 그 이후 useEffect

---

🔍 언제 useLayoutEffect를 써야 할까?

useLayoutEffect는 다음처럼 화면이 그려지기 전에 레이아웃 조정이 필요한 경우에만 써야 한다.

✅ 쓰는 게 맞는 상황

• DOM의 크기, 위치 계산 후 위치 이동 (예: 툴팁 위치 계산)
• 스크롤 위치 강제 조정
• 첫 렌더링에서 깜빡임 방지

useLayoutEffect(() => {
  const width = boxRef.current.offsetWidth;
  boxRef.current.style.left = `${width / 2}px`;
}, []);

---

❌ 잘못 쓰면 성능 이슈

useLayoutEffect는 브라우저가 화면 그리기(painting)를 멈추고 기다리게 된다.

그래서 불필요하게 사용하면 렌더링이 느려지고,
특히 모바일 기기에서는 프레임 드랍이 생기기도 한다.

---

✅ 대부분은 useEffect로 충분하다

useEffect(() => {
  document.title = '페이지 제목 바꾸기';
}, []);

• 서버 데이터 요청
• 이벤트 리스너 등록
• 로그 출력, 알림 발생 등
  → 이런 것들은 전부 useEffect로 처리하면 충분하다.

---

✍️ 요약 비교

항목	useEffect	useLayoutEffect
실행 시점	화면 그려진 후	화면 그려지기 직전
비동기 여부	비동기적	동기적
성능 영향	거의 없음	주의 필요 (렌더링 블로킹)
주 사용 목적	데이터 패칭, 리스너 등록 등	DOM 위치, 사이즈 조정

---

📝 내가 느낀 점

개인 프로젝트에서는 useEffect만으로도 대부분의 사이드 이펙트를 처리할 수 있었다.
그런데 툴팁 UI를 만들면서 useLayoutEffect로 위치 계산을 안 하면
툴팁이 깜빡이며 움직이는 현상이 생겼고,
그제야 "아 이게 그려지기 전에 실행돼야 하는 거구나" 하고 실감했다.

이제는 “정말 DOM 계산이 필요한 경우에만 useLayoutEffect를 쓰자”는 원칙이 생겼다.

---

🧩 "둘 다 이펙트지만, '언제 실행되느냐'는 전혀 다르다."