리액트 라이프 사이클 - useEffect

Lifecycle

 

라이프 사이클(Lifecycle) 이란?

라이프 사이클은 말 그대로 생명 주기이다. 그렇다면 리액트에서의 라이프 사이클은 무엇일까?

리액트에서의 라이프 사이클은 바로 컴포넌트의 수명 주기를 말한다. 컴포넌트의 수명 주기는 총 3단계가 있다.

 

1. 컴포넌트가 생성될 때 (마운트)

2. 컴포넌트가 업데이트 될 때 (업데이트)

3. 컴포넌트가 제거 될 때 (언마운트)

 

이 3단계의 수명 주기에 관해서 알아보자

 

컴포넌트가 생성될 때 (마운트)

다음과 같이 useEffect hooks를 이용하여 안에 코드를 넣어주면 컴포넌트가 생성(마운트)될 때 해당 코드가 실행이 된다.

 

useEffect(() => {
  console.log("첫 랜더링")
}, [])

 

컴포넌트가 업데이트될 때 (업데이트)

컴포넌트가 업데이트될 때 코드를 실행시키고 싶으면 다음과 같이 useEffect의 2번째 인자 배열(deps)에 값을 넣어주면 된다. 배열(deps)에 넣어준 값이 변하게 되면 useEffect 안에 있는 코드가 실행이 된다.

 

import React, { useState, useEffect } from "react"

function Counter() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    console.log("리 렌더링")
  }, [count])
  
  ...

첫 렌더링 때 console.log가 실행이 되고 그 후부터는 count의 값이 변할 때마다 console.log가 실행이 된다.

 

 

또한 2번째 인자 배열(deps)을 생략하게 되면 컴포넌트가 렌더링이 될 때마다 계속 코드가 실행이 된다.

 

import React, { useEffect } from "react"

function Counter() {
  useEffect(() => {
    console.log("렌더링")
  })


...

 

 

 

3. 컴포넌트가 제거될 때 (언마운트)

컴포넌트가 제거(언마운트)될 때 코드를 실행시키고 싶으면 다음과 같이 return 안에 넣어주면 된다.

 

import React, { useEffect } from "react"

function Counter() {

  useEffect(() => {
    return () => {
      console.log("죽기 직전")
    }
  })
  
  .....

이렇게 되면 컴포넌트가 사라지기 직전에 console.log가 실행된다.

 

 

마치며

이렇게 useEffect hooks만 잘 사용한다면 컴포넌트의 수명 주기를 잘 관리할 수 있다. 처음 리액트를 배웠을 때는 이 부분이 많이 헷갈렸지만 react로 개발을 계속하다 보니 useEffect를 많이 사용하게 되면서 익숙해지는 거 같다.