컴포넌트의 Lifecycle

컴포넌트의 Lifecycle

컴포넌트가 실행되고 종료되는 과정을 특정 시점별로 나누어 둔 것

컴포넌트는

1. 생성이 될 수도 있고 (mount)

2. 재렌더링이 될 수도 있고 (update)

3. 삭제가 될 수도 있습니다. (unmount)

 

 

Lifecycle Hook

• 함수형 컴포넌트에서도 클래스형 컴포넌트의 기능(React State, Lifecycle Method)을 사용할 수 있도록 만들어주는 기능이다.
• Hook은 모두 use로 시작한다는 특징이 있다.
• 여러 컴포넌트에서 재사용 될 수 있는 로직이라면 사용자가 정의해서 만들 수 있다. => custom hooks

 

1) 클래스형 컴포넌트의 Lifecycle Hook

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

 

2) 함수형 컴포넌트의 Lifecycle Hook

- useEffect() : mount, update시 코드를 실행해주는 함수이다.

- useEffect 바깥에 적어도 똑같이 컴포넌트 mount & update시 실행되긴 하지만, useEffect 안에 적은 코드는 html 렌더링 이후에 동작한다.

=> useEffect안에는 어려운 연산이나, 서버에서 데이터를 가져오는 작업, 타이머 장착할 때 사용하면 좋다.

import {useState, useEffect} from 'react';

function Detail(){

  useEffect(()=>{
    //여기적은 코드는 컴포넌트 로드 & 업데이트 마다 실행됨
    console.log('안녕')
  });
  
  return (생략)
}

- [실행조건]을 따라 설정하면 그 실행조건이 로드&업데이트 될 때마다 useEffect가 실행된다.

useEffect(()=>{
	console.log('안녕')
}, [실행조건]);

- useEffect 동작 전에 실행하는 return () => {}

useEffect(()=>{ 
  그 다음 실행됨 
  return ()=>{
    여기있는게 먼저실행됨
  }
}, [count])