[TIL] useEffect와 useLayoutEffect 차이

 

❓ 궁금한 내용

 

React를 공부하다가 `useLayoutEffect`에 대해 알게 되었고, `useLayoutEffect`를 사용하면 `useEffect`를 사용했을 때와는 달리 화면에 렌더링될 때 값이 0을 출력했다가 값이 채워지는 깜빡임 현상(Flash of Unstyled Content, FOUC)이 발생하지 않는다는 것을 알게 되었다.

그럼 `useLayoutEffect`를 사용하는 것이 더 좋은 것이 아닌가?하는 생각이 들었다. 일단 정답은 'No' 이다.

---

📚 학습 내용

우선 useEffect와 useLayoutEffect에 대해서 알아보자.

 

1. useEffect

`useEffect`는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 hook이고, 비동기적으로 동작한다.

 

 

1.1. useEffect 실행 과정

리액트 컴포넌트 렌더링 -> 브라우저가 화면을 그림 (paint) -> useEffect 실행

 

위와 같은 순서로 실행된다.

따라서 화면이 이미 그려진 후에 실행되기 때문에, 훅 내부에서 상태(state)를 바꾸면 화면이 한 번 더 그려지면서 깜빡임이 발생하는 것이다.

useEffect를 사용했을 때 깜빡임 현상

 

 

2. useLayoutEffect

`useLayoutEffect`는 브라우저가 화면에 DOM을 그리기 전에 이펙트를 수행하는 hook이고, 동기적으로 동작한다.

 

 

2.1. useLayoutEffect 실행 과정

리액트 컴포넌트 렌더링 -> useLayoutEffect 실행 -> 브라우저가 화면 그림 (paint)

 

위와 같은 순서로 실행된다.

화면을 그리기 바로 직전에 실행되기 때문에, 이 내부에서 상태를 바꾸면 리액트는 그 바뀐 것까지 계산을 끝낸 뒤에 화면을 딱 한 번만 그리면서 깜빡임이 전혀 발생하지 않는다.

useLayoutEffect를 사용했을 때

 

 

3. 결정적인 차이점

`useEffect`는 비동기, `useLayoutEffect`는 동기적으로 실행된다.

 

 

4. 그럼 왜 `useLayoutEffect`를 남발하면 안될까?

`useLayoutEffect` 내부의 코드가 실행되는 동안 브라우저는 화면을 그리지 못하고 완전히 멈춰있다. 

 

만약 `useLayoutEffect` 안에서 시간이 오래걸리는 무거운 작업을 하거나 서버에서 데이터를 받아오는 처리를 한다면, 사용자는 그 작업이 끝날 때까지 하얀 화면이나 멈춘 화면을 보며 기다려야 하기 때문에 웹 초기 로딩 속도와 반응성이 떨어진다.

 

결론적으로 `useLayoutEffect`는 시각적인 깜빡임을 해결해주는 대신, 성능이 떨어지는 트레이드오프가 있기 때문에 필요할 때만 사용하는 것이 좋다.

 

 

5. `useLayoutEffect`를 언제 사용하는 것이 좋을까?

DOM 조작(화면에 그려질 요소의 크기나 위치를 측정)으로 UI를 동적으로 변경해야 할 때 주로 사용한다. 

- 예시1: 팝업창이나 툴팁을 띄울 때, 버튼의 위치를 계산해서 즉각 띄워야 하는 경우

- 예시2: 스크롤 위치를 특정 지점으로 강제 이동시켜야 하는 경우

 

위와 같은 상황을 제외하고는 `useEffect`를 사용하는 것을 지향한다.

react 공식문서 왈왈

---

💬 느낀점

useLayoutEffect가 생소한 개념이지만, 적절하게 사용하면 매우 유용할 것 같다. 

특히 크롬 브라우저에서는 useLayoutEffect를 사용할 때 크롬 DevTools에서는 layout과 paint 성능을 측정할 수 있는데, 이러한 성능 모니터링 기능을 사용할 때는 유용하다고 한다. (출처: https://junghyeonsu.com/posts/useeffect-vs-uselayouteffect/ )

 

---

🔑 참고자료

https://prepare-frontend-interview.vercel.app/react#uselayouteffect%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%B4%EB%B3%B4%EC%8B%A0-%EC%A0%81-%EC%9E%88%EB%82%98%EC%9A%94

prepare_frontend_interview | 프론트엔드 면접 준비 핸드북