useEffect, useLayoutEffect 발표 자료

useEffect란?

리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook입니다.

주요 기능

1. 컴포넌트가 마운트 될 때와 업데이트될 때 작업을 수행합니다.

2. 컴포넌트가 언마운트될 때 정리 작업을 수행합니다.

사용방법

import { useEffect } from 'react';

컴포넌트의 최상위 레벨에서 useEffect를 선업 합니다.

 

매개변수

useEffect (function, dependencies)

- function: 수행하고자 하는 작업.

- 선택적dependencies:  배열의 형태이며, 배열 안에는 검사하고자 하는 특정 값 or 빈 배열

 

useEffect(() => {
    // 여기에 부수 효과를 수행하는 코드를 작성합니다.
    console.log('컴포넌트가 마운트되었어요.');

    // cleanup 함수를 반환하여 컴포넌트가 언마운트될 때 수행할 작업을 정의합니다.
    return () => {
      console.log('컴포넌트가 언마운트되었어요.');
    };
  }, []);

의존성 배열

- 빈 배열( [] ): 컴포넌트가 처음 마운트 될 때 한 번만 실행됩니다.

- 특정 값들 ( [value] ): 배열 안의 값들이 바뀔 때마다 Effect가 다시 실행됩니다.

 

클린업 함수

주로 해당 시스템과 연결을 끊을 때 사용됩니다.

 

사용 예시

데이터 가져오기

useEffect(()=>{
const getExpenses = async () => {
  try {
    const { data } = await axios.get("http://localhost:4000/List");
    return data;
  } catch (error) {
    console.error(error);
  }
}
},[])

 

useLayoutEffect란?

React에서 제공하는 Hook 중 하나로, 컴포넌트가 화면에 그려지기 전에 동기적으로 실행되는 함수를 설정할 수 있게 해 줍니다. 이는 "useEffect"와 비슷하지만, 중요한 차이점이 있습니다.

 

사용방법

import { useLayoutEffect } from 'react';

컴포넌트의 최상위 레벨에서 useLayoutEffect를 선업 합니다.

 

매개변수

useLayoutEffect(function, dependencies)

- function: 수행하고자 하는 작업.

- 선택적dependencies:  배열의 형태이며, 배열 안에는 검사하고자 하는 특정 값 or 빈 배열

 

사용 예시

import React, { useLayoutEffect, useRef } from 'react';

function MyComponent() {
  const divRef = useRef();

  useLayoutEffect(() => {
    // divRef.current에 접근하여 DOM 조작
    divRef.current.style.color = 'blue';
  }, []);

  return <div ref={divRef}>Hello, world!</div>;
}

위 예시에서 "useLayoutEffect"는 div가 화면에 그려지기 전에 색상을 파란색으로 변경합니다.

 

useEffect와 useLayoutEffect의 차이점

• render: DOM Tree를 구성하기 위해 각 엘리먼트의 스타일 속성을 계산하는 과정
• paint: 실제 스크린에 Layout을 표시하고 업데이트하는 과정

useEffect는 컴포넌트들이 render와  paint 된 후 비동기적으로 실행합니다. paint된 후 실행되기 때문에, useEffext 내부에 DOM에 영향을 주는 코드가 있을 경우 사용자 입장에서는 화면의 깜빡임을 보게 됩니다.

 

useLayoutEffect는 컴포넌트들이 render 된 후 실행되며, 그 이후에 paint가 됩니다. 이 작업은 동기적으로 실행됩니다. paint 가 되기 전에 실행되기 때문에 DOM을 조작하는 코드가 존재하더라도 사용자는 깜빡임을 경험하지 않습니다.

 

결론

useLayoutEffect는 동기적으로 실행되고 내부의 코드가 모두 실행된 후 painting 작업을 거칩니다. 따라서 로직이 복잡할 경우 사용자가 레이아웃을 보는 데까지 시간이 오래 걸린다는 단점이 있어, 기본적으로는 항상 useEffect만을 사용하는 것을 권장합니다.