[React] Lifecycle과 useEffect

컴포넌트 Lifecycle

출처 : https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

컴포넌트는 위 그림에서처럼 생성될 떄, 업데이트 할 때, 제거할 때 3가지로 Lifecycle이 나뉜다.

 

과거 클래스로 컴포넌트를 만들었을 때는 아래와 같은 방법으로 lifecycle마다 다른 동작을 수행토록 했다.

class Modal extends React.Component {
  componentDidMount(){
    //Detail2 컴포넌트가 로드되고나서 실행할 코드
  }
  componentDidUpdate(){
    //Detail2 컴포넌트가 업데이트 되고나서 실행할 코드
  }
  componentWillUnmount(){
    //Detail2 컴포넌트가 삭제되기전에 실행할 코드
  }
}

하지만 현재는 class보다 function올 통해 컴포넌트를 생성하기 떄문에 function에서의 lifecycle에 따른 간섭법을 알아보자.

 

Lifecycle hook

import {useState, useEffect} from 'react';

function Modal(){

  let [count,setCount]=useState(0)

  useEffect(()=>{
    //여기적은 코드는 컴포넌트 로드 & 업데이트 마다 실행됨
    
    return ()=>{
    	//여기적은 코드는 useEffect가 실행되기 전에 실행됨
    }
  },[count]); //count가 변할 때만 useEffect가 실행됨(최초에도 한번 실행됨)
  
  return (생략)
}

useEffect 함수를 통해 컴포넌트의 lifecycle에 간섭을 할 수 있다.

useEffect 함수는 컴포넌트를 처음 로드할 떄와 업데이트 할 때마다 실행되는데,

return 함수를 사용하게 되면, useEffect 함수가 실행되기 전에 다른 동작을 선수 실행시킬 수 있다.(생략가능)

 

useEffect 함수 끝에 대괄호 안에 아무것도 작성하지 않으면, 컴포넌트가 로드될 때만 함수가 동작하고,

위처럼 count와 같은 state값을 넣어두면, 해당 state값이 변할 때만 함수가 동작한다.

 

useEffect 함수 호출시기

useEffect 함수는 컴포넌트의 다른 과정들이 모두 수행된 후에 실행되는 함수이다.

 

예로 useEffect함수에

let a = setTimeout(()=>{setVisibleState(false);},2000)

이라는 함수를 작동시키면 컴포넌트에 작성되어 있는 페이지가 등장하고 위 과정이 수행될 것이다.

 

하지만 컴포넌트 맨 윗줄에 위같이 정지 코드가 있다면 2초간 정지 후 페이지가 출력된다.

 

 

 

출처 : 코딩애플_React 기초부터 쇼핑몰 프로젝트까지!

https://codingapple.com/course/react-basic/

React 리액트 기초부터 쇼핑몰 프로젝트까지! - 코딩애플 온라인 강좌