[TIL] React - Effect Hook

📝 Effect Hook

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // componentDidMount, componentDidUpdate와 같은 방식으로
  useEffect(() => {
    // 브라우저 API를 이용하여 문서 타이틀을 업데이트
    document.title = `You clicked ${count} times`;
  });

  return (
    // ...
  );
}

count state변수를 선언한 뒤 리액트에게 effect를 사용함을 말하고 있다. useEffect Hook에 함수를 전달하고 있는데 이 함수가 바로 effect이다. 이 effect내부에서 document.title이라는 브라우저 API를 이용하여 문서 타이틀을 지정한다. 같은 함수 내부에 있기 때문에 최신의 count를 바로 얻을 수 있다. 컴포넌트를 렌더링할 때 리액트는 우리가 이용한 effect를 기억하였다가 DOM을 업데이트한 이후에 실행한다. 이는 맨 첫 번째 렌더링은 물론 그 이후의 모든 렌더링에 똑같이 적용된다.

흔하지는 않지만 (레이아웃의 측정과 같은) 동기적 실행이 필요한 경우에는 useEffect와 동일한 API를 사용하는 useLayoutEffect라는 별도의 Hook이 존재한다.