[React] Component LifeCycle

마지막으로 React에 대해서 쓴게 "하기 전에 알아야한다." 

라는 개념으로 쓴 건데 이번부턴 정말 React에 대한 이야기를 해볼까 한다. 

 

React가 처음 나왔을 때부터 도입하고 사용했던 사람들은 다 알겠지만,

그땐 함수형 컴포넌트가 아니었다. 기본적으로 Class 형 컴포넌트로 만들었다. 

그 때 있었던 개념들이 있는데, 아 물론 지금도 존재한다. 

뭐  Mount, UnMount 등등 이런 말들이다. 

lifeCycle은 Class 내부에 이 컴포넌트가 마운트 되면, 실행하는 함수, 언마운트 되기 전에 실행하는 함수

이런걸 정의해두고 마운트될때부터 언마운트 될때까지 그 과정들을 얘기하는 것인디.. 말이 좀 어렵다. 

쉽게 한번 풀어서 설명해보자.

 

1. Mount? UnMount?

일단 이걸 이야기 하기 전에 Mount라는 말에 대해서 알아야한다. 

React는 기본적으로 프로그램 전체를 표현하는 DOM의 특정부위에

잘게 쪼개어진 컴포넌트들을 갈아끼운다. 라는 생각이 들게 하는 구조인데

끼우는 행위가 Mount라고 생각하면 될 것 같다. 마치 CPU, RAM 과 같은 컴퓨터 부품을 소켓에 끼우는 것처럼 말이다.

UnMount는 당연히 반대로 생각하면 될 것이다. 소켓에서 뽑아내는 것.

 

2. LifeCycle

자 Mount와 UnMount에 대해서 알아봤다. 

그럼 LifeCycle을 설명할 수 있다.

LifeCycle은 컴포넌트가 생성되고 mount되는 시점에서부터,  unmount되고 제거되는 시점까지의 생명주기를 이야기한다. 

 

이건 이제 말로 설명하기는 복잡하니 그림으로 살펴보자

이게 LifeCycle을 설명하는 그림이다. 

그림 그대로 이해하면 되는데, 지금은 클래스형 컴포넌트가 아니라 함수형 컴포넌트로 만들고, hooks를 사용하는 사람이 더 많을테니 조금 헷갈릴 수도 있다. 

 

(클래스형 기준)

<Component Mount (생성)>

일단 기본적으로 컴포넌트자체도 클래스이기 때문에 constructor를 통해 생성된다. 생성 후 해당 컴포넌트에 선언되어있는 요소들을 Rendering한다. 그리고 React가 DOM과 참조하는 데이터들을 업데이트하고 Mount의 생성이 끝난다. 그리고 componentDidMount()라는 함수가 실행되면서 Mount 되면 발생해야하는 동작들을 실행한다. 

 

<Component Update>

React의 컴포넌트는 렌더링을 하는 조건이 있다. 당연히 컴포넌트를 생성했을때, 추가로 상위 컴포넌트에서 전달되는 Props가 변경되었을때, 자신 컴포넌트에서 선언한 State가 SetState를 통해 변경 되었을 때, 마지막으로 강제 Update를 할 때 이런 상황을 제외하고는 Rendering을 하지 않는다.  

이런 상황에 되었을 때 React는 변경된 것에 맞추어 DOM 및 참조하는 데이터들을 업데이트 하고 componentDidUpdate() 함수를 실행하여 그와 동시에 발생해야하는 SideEffect를 만들어 낸다. 

 

<Component Unmount (제거)>

이제 이 컴포넌트에서 볼 장 다봐서 다른 컴포넌트로 갈아끼려한다. 라고 했을 때, 현재 마운트되어있는 컴포넌트는 제거해야할 것이다. React는 마운트된 컴포넌트를 제거하기 직전에 componentWillUnmount()라는 함수를 실행하고 해당 컴포넌트는 사라진다. 

 

자 일단 대충은 그림을 통한 설명은 마쳤다. 

그럼 이제 함수형일때 어떻게 할 것인가?

useEffect(() => {

}, []); // ComponentDidMount

useEffect(() => {
	return (
    /*
    *실행할 함수
    *
    */
    ) // ComponentWillUnMount
}, [])

useEffect(() => {


}, [state, props]) // 종속성 배열 내에 state와 props를 선언하여 해당 내용이 변경되면 실행

이게 같은 의미인 것이다. 

useEffect()에 종속성을 비워두면 마운트된 직후에 실행, 그 안에다 return () 을 넣어주면 그 부분은 Unmount시 실행