[React] Lifecycle과 useEffect hook

React는 class로 컴포넌트를 생성할 수 있고, function으로 컴포넌트를 생성할 수 있다.

class컴포넌트와 함수 컴포넌트의 차이는 Lifecycle method를 사용할 수 있냐 없냐가 있다.

React에서 함수 컴포넌트를 사용할 때 Lifecycle 메소드를 사용할 수 없었던 단점이 있었다.

useEffect hook이 나오기 전까지는,,, 

useEffect가 나오고 나서 함수 컴포넌트에서 Lifecycle method의 기능을 비슷하게 구현할 수 있게 되었다.

 

React의 생명주기는 크게 화면이 생성되는 Mounting, 화면이 업데이트되는 Updating, 화면이 사라지는 Unmounting가지로 나누어진다.

Lifecycle Method에 대한 정리 : kmj24.tistory.com/58?category=937229

[React공식문서읽기] State 와 Lifecycle

 

이러한 React Application의 Lifecycle은 예전에는 함수 컴포넌트에서는 구현할 수 없었다.

useEffect hook이 나오면서 함수 컴포넌트에서도 Mounting, Updating, Unmounting기능을 구현할 수 있다.

 

useEffect hook은 아래와 같이 사용할 수 있다.

useEffect(() => {
   //Mounting, Update
   effect
   return () => {
      //Unmounting
      cleanup
   }
}, [/* dependency */])

Mounting - useEffect내의 함수에 Mounting할 기능을 작성한다.

Updating - dependency라는 특별한 배열에 Update에 필요한 상태를 작성하면 해당 값이 바뀔때 마다 컴포넌트가 업데이트 된다.

Unmounting - return 함수내에 Unmount할 내용을 작성한다.