[React] 사용자 경험을 위한 useLayoutEffect

지난 포스팅에서 useEffect 와 관려해서 작성했는데, useLayoutEffect 와 비교를 하면서 내용을 정리해보려 한다.

[React] 컴포넌트 사이드이펙트를 위한 useEffect

 

 

1. Flow Diagram

---

먼저 다이어그램을 통해 useLayoutEffect() 와 useEffect() 가 변경사항이 발생했을 때 언제 실행되는지 보면 좀 더 이해가 편하다.

1. 업데이트가 발생하면, 리액트가 새로운 가상돔(Virtual DOM)을 생성

2. 이전 가상돔과 비교 후, 변경된 부분을 실제 브라우저의 DOM을 업데이트

3. 화면을 그리기 전 useLayoutEffect() 실행

4. 실제 화면에 렌더링 

5. 화면을 그린 이후 useEffect() 실행

 

 

2. useLayoutEffect

---

리액트 공식 문서에서는 '브라우저가 화면을 다시 그리기 전에 레이아웃을 계산합니다' 라고 설명한다.

쉽게 말해 컴포넌트가 화면에 그려지기 전에 정의한 작업을 실행할 수 있도록 하는 훅(Hook)이 useLayoutEffect() 이다.

useLayoutEffect(setup, dependencies?)

사용하는 방식은 useEffect() 와 동일하다.

 

 

3. useLayoutEffect() / useEffect() 비교

---

두 훅(Hook)의 대표적인 차이점은 위의 Flow Diagram 에서도 확인했듯이 렌더링 이전/이후의 실행 시점이다.

- useLayoutEffect() : DOM 업데이트 후 화면이 그려지기 이전 시점에 동기적으로 실행

- useEffect() : 화면이 그려진 이후 시점에 비동기적으로 실행

 

이러한 차이점이 있기 때문에 useEffect() 호출 시 내부에 돔(DOM)을 업데이트하는 코드가 있을 경우에 화면 깜빡임이 발생하게 된다. 

깜빡임이 발생하는 것은 사용자 경험을 해칠 수 있기 때문에 useLayoutEffect() 의 사용이 바람직하지만, 로직이 복잡할 경우에는 사용자가 화면을 보는 데까지 오랜 시간이 걸릴 수 있기 때문에 기본적으로 useEffect() 를 사용하는 것을 권장한다고 한다.

 

 

4. 예제

---

state 의 조건에 따라 첫 painting 에서 다르게 렌더링 되어야 할 때는 useEffect 사용 시 처음에 0이 보여지고 이후에 re-rendering 되며 화면 깜빡임이 발생하기 때문에 useLayoutEffect() 를 쓰는 것이 바람직하다.

function Component() {
    const [state, setState] = useState(0);
    
    useLayoutEffect(() => {
    	if (state === 0) {
        	setState(10 * Math.random());
        }
    }, [state]);
    
    return <button onClick={() => setState(0)}>{statea}</button>;
}