[React] useEffect 사용법 - mount, unmount, update

useEffect

클래스형 컴포넌트의 생명주기 함수 중

componentDidMount, componentDidUpdate, componentWillUnmout 의 기능을 수행한다. 

 

즉, 

1. 마운트 됐을 때 (처음 컴포넌트가 화면에 나타날 때)

2. 업데이트 될 때 (특정 props가 바뀔 때)

3. 언마운트 됐을 때 (컴포넌트가 소멸되기 직전에)

 

 

🔊 사용 방법

 

우선 useEffect hook을 사용하기 위해서 import 해준다. 

import React, { useEffect } from 'react';  //import

 

 

1. 마운트(mount) 됐을 때 

 

useEffect의 첫 번째 인자인 함수에 실행할 코드를 작성한 후, 두 번째 인자에 이렇게 빈 배열을 두면 된다. 

useEffect(()=>{
	console.log('마운트!!');
}, [ ]);

 

 

 

2. 언마운트(unmount) 됐을 때 

 

useEffect의 첫 번째 인자인 함수의 return 값으로 언마운트시 실행할 코드를 작성해주면 된다. 

useEffect(() => {
  // mount
  console.log('마운트');
  
  return() => {
    // unmount
    console.log('언마운트');
  }
}, [ ]);

 

 

3. 업데이트(update) 될 때마다 

 

두 번째 인자인 배열을 아예 비워둔다!

useEffect(()=>{
	console.log('마운트 + 업데이트 될 때 마다 실행');
});