[React] useEffect와 생명주기 메소드(Lifecycle Methods) 정리

 

 

생명주기 메서드

생명주기 메서드(Lifecycle Methods)는 클래스형 컴포넌트에 사용되는데, 

컴포넌트가 브라우저에 ① 나타나고, ② 업데이트되고, ③ 사라지게 될 때 작동되는 메서드입니다.

 

이렇게 태어나고(생성) 사라지게 될 때까지의 컴포넌트의 인생을 Lifecycle이라 표현하는 것인데, 

사용 방법은 대략 아래와 같습니다.

class Lifecycle extends React.Component {
    componentDidMount(){
  	  // 컴포넌트가 Mount될 때 실행될 코드
    }
    componentDidUpdate(){
  	  // 컴포넌트가 Update될 때 실행될 코드
    }
    componentWillUnmount(){
  	  // 컴포넌트가 unmount될 때 실행될 코드
    }
}

 

 

 

useEffect

라이프사이클 메서드와 비슷한 기능을

함수형 컴포넌트에서는 useEffect로 사용할 수 있습니다.

import { useEffect } from "react"

컴포넌트 상단에 import를 작성한 후, 다음과 같은 형식으로 사용합니다.

 

 

마운트 되었을 때  & 업데이트되었을 때 실행

useEffect(()=> {
  // 마운트 되었을 때 & 업데이트 되었을때 실행되는 코드
})

 

 

마운트 될 때 한 번만 작동하게 하고 싶다면

함수의 두 번째 파라미터에 비어있는 배열을 넣어주면 됩니다. 

useEffect(()=> {
  // 마운트 되었을때 실행할 코드
},[])

 

 

특정 값(state)이 업데이트될 때만 실행하고 싶다면

useEffect(()=> {
  // count 값이 변경될 때만 실행
},[count])

 

 

useEffect가 실행되기 전에 실행하고 싶다면

useEffect(()=> {
	return() => {
    // useEffect가 실행되기 전에 실행하고 싶다면 return을 사용합니다ㅣ
    // cleanup function이라고 부름.
    };
},[count])

※ 오직 언마운트될 때만 cleanup 함수를 호출하고 싶다면 useEffect 함수의 두 번째 파라미터에 비어있는 배열([])을 넣으면 됩니다.