[React Hooks] useEffect 사용법 - 함수형 컴포넌트 생명주기

1. useEffect 란?

useEffect 함수는 리액트 컴포넌트가 렌더링 될 때마다 특정한 작업을 실행할 수 있도록 하는 React Hook이다.

component가 mount, unmount, update 됐을 때마다 특정한 작업을 처리할 수 있다.

-> 클래스형 컴포넌트에서 사용할 수 있었던 생명주기 메서드를 useEffect를 사용하여 함수형 컴포넌트에서도 사용할 수 있게 됨

2. useEffect

기본 형태는 다음과 같다.

useEffect(effect, deps)

effect : 렌더링 이후 실행할 함수(수행하려고 하는 작업)

deps :  배열 형태, 검사하고자 하는 값(특정한 값이 변경될 때 effect 함수를 실행하고 싶을 경우 사용)

 

useEffect 함수 불러오기

import React, { useEffect } from "react"

 

useEffect

useEffect(() => {
	
})

두번째 파라미터를 주지 않으면 모든 컴포넌트가 리렌더링 될 때마다 실행됨

 

componentDidMount()

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

렌더링이 완료된 후 호출됨

=> 마운트 이후 1회만 실행

 

componentDidUpdate() & getDerivedStateFromProps()

useEffect(() => {
	
}, [props, state, ...])

컴포넌트 업데이트 작업이 완료된 후 실행됨

=> 2번째 파라미터 배열에 적어준 변수가 변경될 때만 실행

 

componentWillUnmount()

useEffect(() => {
	// 코드
    return () => {
    	// unmount나 unsubscribe 코드
    }
}, [props, state, ...])

컴포넌트가 dom에서 제거될 때 호출됨, 언마운트나 구독 해지 관련 코드는 return 콜백에 작성

=> 언마운트, 구독 취소 시에 사용