[6# useEffect] React Component Life Cycle 제어하기

목차 : 

1. React Component Life Cycle ?

2. useEffect (*mount/ update/ unmount)

 

---

 

1. React Component Life Cycle?

React Component Life Cycle은 3단계를 거친다.

생성되어 화면에 표시되는 Mount,  상태 변화로 화면에 표시되는 값이 업데이트되는 Update,  화면에서 제거되는 Unmount이다. 

간단한 예시로 Mount에서는 초기화 작업을, Update 에서는 예외 처리 작업을, Unmount에서는 메모리 정리 작업을 수행한다고 보면 이해가 빠를 것이다.

 

Class Component 에서는 위 그림 처럼 각 단계별로 React에서 제공하는 method가 존재한다.

근데 왜 useEffect를 배우냐?

useEffect는 Functional Component 에서 mounting/ updating/ unmounting 기능을 수행한다.  대부분 React는 현재 Functional Component를 사용한다.

그 이유는 Class Component는 코드가 길어지고, 중복 코드, 가독성 단점이 크기 때문이다.

그래서 우리는 useEffect를 배워야한다.

 

여기서 이 기능 또한 use가 붙은 걸 알 수 있다.

React + Hooks 가 만나 useState/ useEffect/ useRef 기능을 사용할 수 있게 되었다.

Hooks는 낚아 채는 의미로 React의 Class Component의 기능을 낚아채 Functional Component에서 사용할 수 있게 해주는 것이다.

 

 

 

2. useEffect (*mount/ update/ unmount)

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

//useEffect 
useEffect(()=>{
	// todo			<== callback
},[]);				<== dependency array

import는 이전 useState, useRef와 동일하다.

 

여기서 중요하게 봐야할 점은 useEffect안에 callback 영역과 dependency array이다

*callback :

(1) dependency array 가 빈상태로 있을 경우 마운트 되는 시점에서만 호출된다. update 되는 시점엔 호출 안함.
(2) dependency array 에 target이 있을 경우 target이 update 되는 시점에 호출된다.

(3) dependency array가 아예 없이 callback만 존재할 경우, update 되는 시점에 호출된다. 즉, re-rendering 되는 경우 모두 callback이 호출된다.

*dependency array : 의존성 배열로 mount/update/unmount 의 target을 포함시킬 수 있다.

 

 

mount/ update는 아래와 같이 사용된다.

//mount
useEffect(()=>{
	console.log("mount");
}, []);

//update
useEffect(()=>{
	console.log("update");
});

 

그럼 unmount는 어떻게 작성해야할까?

unmount는 useEffect callback함수 영역에 return callback이 존재해야한다.

useEffect(()=>{
	console.log("update");
    
    return ()=>{
    	console.log("unmount");
    };
}, [target]);

 

target의 값이 업데이트 될 때 콘솔 로그에 "update"가 표시되며

target이 화면에서 사라질 때, 즉 unmount 될 때 return callback이 호출되어 

콘솔 로그에 "unmount"가 표시된다.

 

useEffect는 잘 이용하면 감시하고 싶은 것을 감지하고 Callback함수를 실행해 여러 기능을 수행할 수 있다.