[React] useEffect Hook과 Lifecycle Hook의 비교

지금은 class형 컴포넌트와 Lifecycle Hook을 사용해서 개발하고 있지만, 현업에서는 function 컴포넌트와 useEffect Hook을 많이 사용한다고 합니다.

1. useEffect Hook

사용법은 useEffect Hook이 좀 더 간단한데 function 컴포넌트 안에 Hook을 입력하면 됩니다(return 전).

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

function Detail(){

  useEffect(()=>{
    //코드를 적습니다 여기
  });
  
  return (
    <HTML/>...
  )
}

1. useEffect를 사용하기 위해서는 미리 useEffect를 import 해주어야 합니다.
2. useEffect() 를 입력 후 안에 콜백함수를 집어넣습니다.
3. 콜백함수 안에는 Detail 컴포넌트가 첫 등장하고나서 실행하고싶은 코드가 있으면 적어주면 됩니다.

useEffect() 내의 코드의 실행조건은

1. 컴포넌트가 첫 등장해서 로딩이 끝난 후에 (mount가 끝났을 때)
2. 컴포넌트가 재렌더링 되고난 후 때 (update 되고난 후에)

입니다.

2. Lifecycle Hook

useEffect Hook에 비해서 조금 복잡하지만 Lifecycle Hook을 이용하면 컴포넌트의 Lifecycle 주기에 대해서 조금 더 확실한 이해가 가능합니다.

컴포넌트는 Lifecycle의 개념에 따라서 컴포넌트는

1. 생성이 될 수도 있고,
2. 삭제가 될 수 있고,
3. 관련된 state가 변경되면 재렌더링이 일어나 업데이트가 될 수도 있습니다.

class Detail2 extends React.Component {
  componentDidMount(){
    //Detail2 컴포넌트가 Mount 되고나서 실행할 코드
  }
  componentWillUnmount(){
    //Detail2 컴포넌트가 Unmount 되기전에 실행할 코드
  }
}

1. componentDidMount()는 컴포넌트 첫 등장 후 실행할 코드
2. componentWillUnmount()는 컴포넌트가 사라지기 전 실행할 코드

로 이해하면 됩니다.