useEffect

개요

• 컴포넌트를 외부 시스템과 동기화시킬 수 있는 Hook
  • 백엔드 API를 호출하여 값을 컴포넌트에 적용하는 데 사용할 수 있다.
• 리액트의 라이프사이클 관련 메서드
• useEffect(setUp, dependenciesArray)

const [name, setName] = useState("");

useEffect(() => {
  const data = getData();
  setName(data.name);
  
  // cleanup 함수
  return () => {
    // ...
  }
}, [name]);

매개 변수

• setUp
  • useEffect에서 실행하는 함수
  • useEffect가 포함된 컴포넌트가 렌더링되거나, 의존성 배열에 담긴 요소가 변경될 경우 실행
• dependencies (의존성 배열)
  • React는 컴포넌트 렌더링 시, 혹은 의존성 배열의 값이 이전과 달라졌을 경우 setUp 함수를 실행한다.
  • state, 변수, 함수 등 포함 가능
  • 위와 같이 의존성 배열에 아무것도 주지 않았을 경우, 컴포넌트 렌더링 시에만 실행
• cleanup (클린업 함수)
  • setUp함수가 다음에 호출되기 전에 실행되는 함수.
  • useEffect에서 수행한 작업을 정리하고 메모리 leak을 방지하는 데 사용

특징

• 클라이언트 사이드 렌더링에만 실행된다. 서버 사이드 렌더링에는 실행되지 않는다.
• 컴포넌트의 렌더링 이후 비동기적으로 실행된다.
  • 즉, DOM이 화면에 그려진 후 실행된다.

useLayoutEffect

개요

• 리액트 훅 플로우를 보면, LayoutEffect라는 것을 확인할 수 있다.
  
• useEffect와 형태와 사용방법은 완전히 동일하나, 호출 순서에 차이가 있다.
  • DOM 업데이트 -> LayoutEffect 실행 -> DOM이 화면에 그려짐 -> Effect 실행
• 따라서 화면이 그려지기 전 state가 설정되어야 할 경우, useEffect보다는 useLayoutEffect를 쓰는 것이 사용자 경험 상 좋다.

useInsertionEffect

개요

• React 18에서 추가된 Hook
• CSS-in-JS 방식을 사용하는 라이브러리를 위한 Hook
  • 이 경우가 아니라면, useEffect나 useLayoutEffect를 사용하는 것이 권장됨.
• DOM 업데이트 이전에 호출되는 useEffect의 한 형태이다.
• 일반적으로 DOM 변경 전 동기적으로 스타일을 주입하는 데 사용된다.
• useEffect와 마찬가지로, 서버사이드에선 실행되지 않고 클라이언트사이드에서만 실행된다.

import { useInsertionEffect } from 'react';

// 컴포넌트
function MyButton() {
  
  	function useCSS(rule) {
    	useInsertionEffect(() => {
      	// ... <style> 태그를 여기에서 주입하세요 ...
    	});
  		return rule;
	}
  
  const className = useCSS('...');
  return <div className={className} />;
}

사용하는 경우

• CSS-in-JS 라이브러리를 사용하는 경우
• 렌더링 전 다크모드 여부를 결정해야 할 경우

왜 쓰는가?

• 렌더링 중에 스타일을 주입하고 React가 non-blocking update를 처리하는 경우, 브라우저는 컴포넌트 트리를 렌더링하는 동안 매 프레임마다 스타일을 다시 계산하므로 느릴 수 있음.
• useInsertionEffect는 컴포넌트에서 다른 Effect가 실행될 때 이미 실행되어 있음이 보장되므로 style이 주입된 상태에서 Effect 실행 가능