[React] useEffect와 useLayoutEffect

Joowon Jang·2024년 10월 24일

목록 보기

13/19

useEffect

외부 시스템과 컴포넌트를 동기화하는 Hook

useEffect(() => {}, []) // useEffect(setup, dependencies?)

리렌더링(또는 최초 마운트)이 발생할 때, dependencies의 값들이 변했는지 (Object.is로) 비교하고, 값이 변했다면 setup 함수를 실행한다.
dependencies가 없다면 리렌더링될 때마다 실행

사용 예시

아래는 React 공식 문서에서 제공하는 예시이다.

import { useEffect } from 'react';
import { createConnection } from './chat.js';

function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');

  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.connect();
    return () => {
      connection.disconnect();
    };
  }, [serverUrl, roomId]);
  // ...
}

최초 렌더링 시, 그리고 serverUrl과 roomId라는 반응형 값(state, props 등)이 변경될 때마다 useEffect의 setup 함수를 실행한다.
그리고 setup 함수 내부의 return에 있는 함수는 마운트 해제 시에 실행되며, cleanup 함수라고 한다.
❗️ cleanup 함수의 반환 값은 항상 undefined여야 한다. (React에서 오류 발생)

참고: useEffect - React
https://ko.react.dev/reference/react/useEffect

useLayoutEffect

useLayoutEffect(() => {}, []) // useLayoutEffect(setup, dependencies?)

사용법과 기본적인 흐름은 useEffect와 같다.
차이가 있다면, useLayoutEffect는 브라우저가 화면을 다시 그리기 전에 실행되는 useEffect이다.

참고: useLayoutEffect - React
https://ko.react.dev/reference/react/useLayoutEffect

useEffect와 useLayoutEffect의 차이

useEffect와 useLayoutEffect의 차이는 각각의 실행 시점에 있다.
React의 렌더링 흐름을 알아야 이해하기 쉽기 때문에, 먼저 아래의 글을 읽어보면 좋을 것 같다.

React의 렌더링 흐름
https://velog.io/@juwon98/React-render-and-commit

Hook의 실행 시점

useEffect: 브라우저가 화면을 그린 후 (Painting 후)
useLayoutEffect: 브라우저가 화면을 그리기 전 (Painting 전)

두 Hook의 적절한 사용

useEffect와 useLayoutEffect는 각각의 실행 시점에 따라 적절하게 선택하여 사용하는 것이 중요하다.

useEffect의 경우, DOM Tree에 따라 브라우저가 Painting을 마친 후에 실행되기 때문에, DOM을 직접 조작한다면 문제가 발생할 수 있다.
그래서 데이터 fetching이나 비동기작업, 이벤트 리스너 추가 등 UI에 즉각적인 영향을 주지 않은 경우에 사용하는 것이 적절하다.

useLayoutEffect의 경우, Painting 이전에 실행되기 때문에, 스타일의 변경이나 애니메이션 설정 등 DOM을 직접 조작하는 작업에 적절하다.

"무조건 useLayoutEffect로 사용하면 안되나?" 하는 생각을 할 수 있다.
하지만, React 공식 문서에 따르면 useLayoutEffect를 사용하는 경우 성능 저하가 발생할 수도 있다고 한다.

+ 예전에 진행했던 프로젝트에서 로그인하지 않은 유저의 redirection을 위해 react-router의 navigate를 useLayoutEffect에서 사용했더니 정상적으로 redirection이 안됐던 경험이 있다...