React는 클래스형(Class Component)과 함수형(Function Cmpoonent) 두 종류로 나뉜다. 함수형 React가 트렌드가 된 이후로, Hook과 Context 등, 함수형 컴포넌트를 위한 다양한 요소가 추가됐다.

그 중 React의 라이프사이클과 연관되는 Hook은 컴포넌트 개발에 있어 중요한 요소다. 개발자가 자체적으로 다양한 훅을 만들 수 있지만, React 또한 개발자가 React를 좀 더 간편하고 효율적으로 활용할 수 있도록 라이브러리 단계에서 다양한 Hook을 제공하고 있다.

그 중 많이 렌더링을 제어하는데 사용하는 훅으로 useEffect와, 비슷하면서도 다소 생소한 useLayoutEffect가 존재한다.

이 문서에서는 useEffect와 useLayoutEffect 훅의 내용과 사용법을 알아봄으로써, 렌더링 작업을 적절히 제어해본다.

React 개발자라면 useEffect를 반드시 한 번쯤 사용했을 것이다. useEffect 훅은, 함수형 컴포넌트에서 React 외부의 코드를 동작하기 위해 사용하는 훅이라 정의된다.

여기서 React 외부의 코드란, API 데이터를 가져온다거나, 특정 DOM을 조작한다거나, 브라우저 영역의 코드를 사용하는 등의 코드를 의미한다.

useEffect의 가장 큰 특징은, useEffect에 선언된 코드는 반드시 렌더링 작업이 완료된 이후에 실행된다는 것이다. 즉, 반드시 클라이언트 사이드에서의 동작을 의미한다.

Client Side
모던 React에서는 코드의 동작 영역을 서버 사이드(Server Side)와 클라이언트 사이드(Client Side)로 구분한다.
각각의 영역에서만 동작 가능한 코드들이 있다. 예를 들어, 클라이언트 사이드는 쿠키나 로컬 스토리지, DOM 등, 브라우저와 연관된 코드를 수행할 수 있다.

일반적인 웹 프론트 개발과 달리, React 혹은 그와 비슷한 프론트엔드 프레임워크의 경우, 컴포넌트가 렌더링된다는 개념이 생기며, 올바르지 않은 단계에서 로직을 수행할 경우, 문제가 발생할 수 있다. 예를 들어, 컴포넌트가 아직 렌더링되지 않았음에도, DOM에 접근한다거나, 쿠키를 사용하는 등의 클라이언트 코드를 수행할 경우, 렌더링 실패 혹은 그에 준하는 오류가 발생하며, 렌더링에 실패하게 된다.

렌더링이 완전히 끝난 이후엔 클라이언트 사이드 로직을 수행할 수 있으므로, useEffect를 통해, 클라이언트 사이드에서만 동작하는 코드를 명시할 수 있다.

아래는 useEffect의 기초적인 사용법이다.

TSX
1
useEffect(callback, arr);

callback에 원하는 콜백 메서드를 지정할 수 있다. 별도의 파라미터를 받을 수는 없다. 이 콜백 메서드는 렌더링 작업이 끝난 이후, 비동기적으로 수행될 것이다.

arr은 의존성 배열이다. 해당 배열에는 어떤 변수든 할당할 수 있으며, 할당한 변수가 변경되면, useEffect의 콜백 메서드가 다시 수행된다.

이러한 특징으로 특정 변수 변경 시, 의도적으로 특정 동작을 수행하여, 변수의 변경에 대응하여 적절한 렌더링을 수행할 수 있다.

useEffect는 기본적으로 void를 반환하지만, return을 활용하여 콜백 메서드를 반환할 수 있다. 이를테면 아래와 같은 방식이다.

TSX
1
2
3
4
5
6
7
8
9
10
11
useEffect(() => {
    const handle = () => {
        console.log(`just resized at ${Date.now()}`)
    }

    document.addEventListener('resize', handle);

    return () => {
        document.removeEventListener('resize', handle);
    }
}, []);

return으로 콜백 메서드를 다시 반환했다. 이 return은 훅을 초기화하는 코드로, return의 콜백 메서드가 수행되는 조건은 아래와 같다.

1. 컴포넌트가 언마운트 될 때.
2. 디펜던시 배열의 값이 변경되어 리렌더링 될 때.

위와 같이, 컴포넌트 언마운트 및 리렌더링 시, 초기화하거나, 제거해야할 동작이 있을 경우 사용한다.

위 코드를 예로 들자면, 컴포넌트가 렌더링되면서, document 전역에 리사이즈 이벤트를 추가했다. 만약, return으로 이벤트를 제거하지 않을 경우, 컴포넌트가 마운트되거나, 렌더링이 다시 일어날 때마다 리사이즈 이벤트가 누적되어 복수로 수행된다.

TSX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { useEffect } from 'react';

function Component(): JSX.Element {
    useEffect(() => {
        const tag = document.getElementById('target');

        if (tag) {
            tag.innerHTML = `in client side at ${Date.now()}`
        }
    }, [ deps ])

    return (
        <div>
            <h1>title</h1>

            <p id="target">initial</p>
        </div>
    )
}

useEffect의 코드는 렌더링 작업이 끝난 이후 동작한다. #target의 HTML 내용을 변경하며, 사용자는 렌더링 된 직후, useEffect의 코드가 수행되기 전까지의 짧은 시간동안 initial이라는 초기 텍스트를 관측할 수 있다.

deps 변수가 변할 때마다, 콜백 메서드가 다시 실행되며, 그 때마다 Date.now()에 의해 표시된 값이 바뀌는 걸 확인할 수 있다.

useEffect는 위에서도 다뤘다시피, 렌더링 후 코드를 비동기적으로 수행한다. 대다수의 React 개발자들이 많이 접하므로, 이 글을 보고 있는 당신 역시 React 개발자라면, 별다른 설명이 필요 없을 정도로 익숙할 것이다.

그렇다면 useLayoutEffect란 무엇이고, 어떻게 다룰까?

아래는 useLayoutEffect의 기초적인 사용법이다.

TSX
1
useLayoutEffect(callback, arr);

결론부터 얘기하자면 useEffect와 사용 방법이 완전히 동일하다. 별다른 설명이 필요 없을 정도.

TSX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { useLayoutEffect } from 'react';

function Component(): JSX.Element {
    useLayoutEffect(() => {
        const tag = document.getElementById('target');

        if (tag) {
            tag.innerHTML = `in client side at ${Date.now()}`
        }
    }, [ deps ])

    return (
        <div>
            <h1>title</h1>

            <p id="target">initial</p>
        </div>
    )
}

이는 예시 코드에서도 나타나있는데, useEffect와 useLayoutEffect의 키워드만 변경해도 정상적으로 동작함은 물론, 최종 결과물마저 동일하다.

그렇다면 useEffect와 useLayoutEffect 단순히 알 수 없는 내부적인 이유로 갈라졌지만, 동작은 같은 숨겨진 쌍둥이였던걸까?

앞서 말했듯이, useEffect와 useLayoutEffect의 동작 방식은 동일하다. 차이는 다른 곳에 있는데, 바로 동작의 시점이다.

React 페이지가 실제 우리 눈에 표현되는 과정은 크게 두 가지로 나뉜다. 흔히 말하는 렌더링(rendering) 단계와 페인팅(painting) 단계가 존재한다.

• 렌더링(rendering): DOM 트리를 구성하기 위해, 레이아웃 및 스타일을 연산하는 과정
• 페인팅(painting): DOM 트리를 실제로 표현하는 과정

보편적으로 렌더링이라 뭉뚱그려 표현하지만, 실제로 페이지가 완전히 표현되는 시점은 페인팅 작업이 끝난 이후이다. 스크립트의 양이 크거나 복잡하여, 연산이 오래걸릴 경우, 사용자는 장시간 흰 화면을 보게 된다.

useLayoutEffect는 렌더링 이후, 페인팅이 시작되기 이전에 동기적으로 동작하는 훅이다. 반대로 useEffect는 페인팅 이후 비동기적으로 동작한다.

간단하게 도식화하면 위와 같은 방식이다. useLayoutEffect는 사용자가 페이지를 보기 전에 연산이 일어나므로, 초기값 연산에 유용하다.

useEffect로 이를 구현하면, 기본값이 잠깐 표시된 이후, useEffect의 동작으로 약간의 시간차를 두고 반영되는걸 볼 수 있다. useLayoutEffect는 사용자가 페이지를 볼 수 있는 페인팅 이전에 동작하므로, 초기 연산 과정에서 나타나는 헛점을 숨길 수 있다.

단, useEffect와 달리 동기적으로 동작하므로, 너무 복잡한 연산을 할당할 경우 렌더링 시간이 길어지므로 주의해야한다.

CodeSandbox를 통해 useEffect와 useLayoutEffect를 비교해보자. 완전히 동일한 동작을 수행하는 두 훅을 작성했다.

각 훅은 반복문을 5000번 수행하여, DOM에 텍스트를 표현한다.

useLayoutEffect로 인해 초기 렌더링 시간이 소요되며, 페인팅이 완료되어 페이지가 표시된 직후, useEffect가 동작한다.

때문에 사용자는 useEffect의 동작이 끝나기 전까지 약간의 빈 공간을 보게 된다.

useLayoutEffect와 useEffect의 사용법은 동일하지만, 동작 시점의 상이함으로 인해 차이가 발생한다.

useLayoutEffect은 작고 간단한 초기 연산에 용이하며, useEffect는 데이터 fetch, 이벤트 훅 등 다양한 로직을 수행하는 데 용이하다.

용도에 맞는 훅을 사용함으로써, 페이지의 렌더링을 효과적으로 관리해보자.