React Hook - useEffect

React Hook인 useEffect 는 컴포넌트 라이프 사이클에서 일어나는 Side Effect를 관리할 수 있게 해준다.

 

Side Effect는 컴포넌트가 렌더링 과정에서 렌더링 이외에 작업을 부르는데, API 호출 , 데이터 저장, 로그 등 다양한 일들이 있을 수 있다.

 

타이머 등을 동작하는 웹 사이트에서 언마운트가 될 때 해제되어야 하는 업무들을 포함한다.

 

import { useEffect } from 'react';

useEffect(() => {
  fetch("https://api.example.com/data")
    .then(response => response.json())
}, []); // [] 는 의존성 배열

 

일반적으로 하는 useEffect 사용하는 형태로 렌더링 후 즉 DOM 업데이트가 완료된 다음 실행한다.

 

의존성 배열의 경우 안에 값이 없다면 처음 렌더링 된 경우에만 실행한다. 

의존성 배열의 값이 있을 경우 해당 값이 변동 될 때마다 실행되게 변경된다.

 

useEffect(() => {
  console.log("Count has changed:", count);
}, [count]);  // count가 변경될 때마다 실행

 

 

아까 얘기한 것처럼 타이머 해제하는 CleanUp을 하는 경우 

 

useEffect(() => {
  const timer = setInterval(() => {
    console.log("Timer running");
  }, 1000);

  return () => clearInterval(timer);  // 타이머는 컴포넌트가 언마운트될 때 해제됨
}, []);

 

return 으로 함수를 반환하면 되는데, 컴포넌트가 언마운트 되거나 의존성 배열의 값이 변경되기 직전에 실행된다.

(페이지를 벗어나거나 하면 브라우져에 의해 자동으로 정리가 되지만, SPA 같은 구조에서는 명시적 클린업이 필요하다고 한다.)