개발하는데 다 이유가 있겠지

기본 개념

`useEffect`와 `useLayoutEffect`는 모두 컴포넌트가 렌더링된 후 특정 작업을 수행하기 위해 사용됩니다. 하지만 각각의 실행 시점과 목적이 다르기 때문에, 상황에 따라 적절한 Hook을 선택해야 합니다.

 

---

 

useEffect

`useEffect`는 렌더링이 완료된 후 비동기적으로 실행됩니다. 즉, 화면이 사용자에게 실제로 표시된 이후에 실행됩니다.

주요 특징

• 비동기적 실행
• 화면 표시 후 실행
• 성능에 미치는 영향이 적음

사용 사례

useEffect(() => {
  // API 데이터 가져오기
  fetchData().then(data => setData(data));

  // 이벤트 리스너 등록
  window.addEventListener('resize', handleResize);

  // 클린업 함수
  return () => window.removeEventListener('resize', handleResize);
}, []);

 

---

 

useLayoutEffect

`useLayoutEffect`는 DOM이 업데이트된 직후, 화면이 다시 그려지기 전에 동기적으로 실행됩니다.

주요 특징

• 동기적 실행
• 화면 표시 전 실행
• DOM 측정 및 레이아웃 조정에 적합
• 과도한 사용 시 성능 저하 가능성

사용 사례

useLayoutEffect(() => {
  // DOM 요소의 크기나 위치 측정
  const height = elementRef.current.offsetHeight;

  // 측정된 값을 기반으로 레이아웃 조정
  setElementHeight(height);
}, []);

 

---

 

실행 순서 비교

1. React가 화면을 렌더링
2. useLayoutEffect 실행 (동기적)
3. 브라우저가 화면을 그림
4. useEffect 실행 (비동기적)

 

---

 

언제 무엇을 사용해야 할까?

useEffect 사용이 적합한 경우

• API 호출
• 이벤트 리스너 등록
• 로깅
• 타이머 설정
• 기타 비동기 작업

useLayoutEffect 사용이 적합한 경우

• DOM 요소의 크기나 위치 측정
• 스크롤 위치 조정
• 애니메이션 초기 설정
• 툴팁이나 모달의 위치 조정

 

---

 

주의사항

useLayoutEffect는 동기적으로 실행되기 때문에, 복잡한 계산이나 무거운 작업을 수행하면 화면 표시가 지연될 수 있습니다. 따라서 꼭 필요한 경우가 아니라면 useEffect를 사용하는 것이 좋습니다.

useLayoutEffect와 Reflow의 관계

useLayoutEffect는 브라우저의 렌더링 과정 중 Reflow(Layout) 단계와 밀접한 관계가 있습니다. Reflow는 DOM 요소들의 크기와 위치를 계산하는 과정인데, useLayoutEffect는 이 Reflow 단계와 동일한 시점에 동기적으로 실행됩니다. 즉, React가 DOM을 업데이트한 직후, 브라우저가 화면을 그리기 전(Repaint)에 useLayoutEffect가 실행되어 DOM 측정이나 레이아웃 조정과 같은 작업을 수행할 수 있습니다. 이 때문에 useLayoutEffect 내에서 DOM 요소의 크기나 위치를 측정하고 변경하는 작업을 하면, 사용자는 중간 과정을 보지 않고 최종 결과만 보게 되어 화면 깜빡임을 방지할 수 있습니다. 다만, 이 과정이 동기적으로 실행되기 때문에 복잡한 계산이나 무거운 작업은 전체 렌더링 성능에 영향을 줄 수 있다는 점을 고려해야 합니다.

 

---

 

결론

useEffect와 useLayoutEffect는 각각의 장단점이 있습니다. 기본적으로는 `useEffect`를 사용하고, 화면 깜빡임이나 레이아웃 관련 이슈가 발생할 때 `useLayoutEffect` 사용을 고려하면 됩니다. 이러한 차이점을 이해하고 적절히 활용하면 더 나은 사용자 경험을 제공할 수 있습니다.