[React.JS] useEffect

개념

React.JS의 useEffect는 클래스 Component를 사용하지 않아도 함수형 Component에서 LifeCycle에 관여할 수 있도록 하는 Hook 기술 입니다. Component가 Mount, Update, Unmount 시점에서 동작하도록 Callback 함수를 사용합니다.

방법

먼저 react 에서 useEffect 를 import 합니다.

import { useEffect } from 'react';

useEffect 함수의 원형 입니다.
첫 번째 파라미터는 Callback 함수, 두 번째 파라미터는 Dependency Array 로 주는 것이 일반적인 형태입니다.

useEffect(() => {}, []);

1. Callback 함수와 빈 배열이 주어지면 componentDidMount, 즉 Component가 Mount 될 때 실행 됩니다.

useEffect(() => {
  console.log("Mount");
}, []);

2. Callback 함수만 주어지면 componentDidUpdate, 즉 Component가 Update 될 때마다 실행 됩니다.

useEffect(() => {
  console.log("Update");
});

3. Callback 함수와 Dependency Array에 state 변수가 주어지면 해당 변수가 Update 될 때마다 실행 됩니다.

useEffect(() => {
  console.log(`${email} has been updated`);
}, [email]);

4. Callback 함수에서 함수를 Return하면 componentDidUnmount, 즉 Component가 Unmount 될 때 실행 됩니다.

useEffect(() => {
  return () => {
    console.log("Unmount");
  }
});