[React] React의 LifeCycle

<Udemy 리액트 챌린지 3주차>

이정환 강사님의 강의 '한입 크기로 잘라먹는 리액트'를 수강하고 있습니다.

Udemy에서 진행하고 있는 리액트 챌린지에 참여하며 3주차 미션으로 "섹션 6 React 기본 - 일기장 만들어보기"을 수강한 내용을 정리합니다. 👍

---

LifeCycle = 생애주기

: 일반적으로 시간의 흐름에 따라, 탄생부터 죽음에 이르는 순간에 따른 단계적인 과정

사람이 생애주기에 따라 행동과 욕구가 다르듯이! 프로그램도 실행과 종료까지 생명주기 SDLC를 갖는다.

 

React 컴포넌트의 LifeCycle

탄생 → 변화 → 죽음

탄생 : 컴포넌트가 화면에 나타나는 것 Mount

변화 :  컴포넌트가 업데이트 (리렌더) Update

죽음 :  컴포넌트가 화면에서 사라짐 UnMount

컴포넌트의 LifeCycle을 제어?

- 각 컴포넌트가 생겨나고, 변화하고, 사라지는 순간에 어떤 작업을 수행시키는 걸 "LifeCycle을 제어한다. 또는 이용한다." 라고 한다.

 

ex) 탄생 때는, 초기화 작업
> 변화할 때는, 변화를 통해 발생할 수 있는 예외를 처리하는 작업
> 죽음에는 컴포넌트가 사용하던 메모리 정리 작업 등을 수행한다.

 

🙂 자신이 사용하는 기술의 LifeCycle을 온전히 이해하고 제어할 수 있어야 한다.

 

React의 LifeCycle 제어 메소드

- 리액트는 컴포넌트의 LifeCycle을 제어하는 메소드를 가지고 있다.

ComponentDidmount : Mount가 되는 순간에 수행

ComponentDidUpdate : 컴포넌트가 Update 되는 순간에 수행

ComponentWillUnmount :  컴포넌트가 unMount 되기 전에 수행

→ 그런데 이건 Class 형 컴포넌트에서만 사용할 수 있다. 🥲

 

 

그렇담 함수형 컴포넌트에선 어떻게 LifeCycle을 관리할 수 있을까?! 👀

👇

 

React Hooks

: 클래스형 컴포넌트가 가지고 있는 기능을 함수형 컴포넌트가 함수처럼 사용할 수 있도록 하는 기능

(ex : useState, useEffect, useRef..)

 

지금까지 만들어온 함수형태로 만드는 컴포넌트는 함수형 컴포넌트인데, 함수형 컴포넌트는 State도 사용할 수 없다.

> 근데 React Hooks 중 하나인 useState로 사용가능했다.

함수형 컴포넌트에서도 LifeCycle 관리 메소드를 사용하기 위해선 useEffect를 사용하면 된다!

 

굳이 함수형 컴포넌트를 쓰는 이유? 🤔

👉 클래스형 컴포넌트는 함수형 컴포넌트에 비해 복잡하고 중복 코드가 발생해 코드가 길어지는 문제가 있다.
중복 코드나 가독성 문제 등을 해결하기 위해 React Hooks 기능이 출현하여 함수형 컴포넌트 개발을 지원한다.
(2019.06 정식 출시된 기능)

 

useEffect

: 함수형 컴포넌트의 LifeCycle 제어 함수

 

1. useEffect import

import React, {useEffect} from "react"

2. useEffect의 Callback 함수 구현

useEffect(()=>{
	// todo..
}, []);

👉 Callback 함수가 수행할 내용을 구현하고, Dependency Array(의존성 배열)을 전달한다.

⭐️ Dependency Array : 의존성 배열 내에 들어있는 값이 변화하면 콜백함수가 수행된다.

 

Mount 되는 시점의 useEffect

useEffect(()=>{
	console.log("Mount!");
}, []);

Mount 되는 시점을 제어하고 싶으면 useEffect Dependency Array로 빈 배열을 전달하면 된다.
→ 배열에 변경이 일어나지 않기 때문에 Mount 시에만 호출되고, 컴포넌트가 변경되어도 useEffect는 수행되지 않는다.

 

Update 시점의 useEffect

useEffect(()=>{
	console.log("Update!");
});

컴포넌트가 업데이트 되는 시점 (다시 복습해보자면~)

- State의 변경

- 부모가 넘겨주는 Props 값이 바뀌거나

- 부모 컴포넌트가 리렌더링된다면!

그러므로 useEffect에 Dependency Array를 전달해주지 않으면 컴포넌트가 업데이트 될 때마다 useEffect가 호출된다.

 

useEffect에 Dependency Array값으로 상태변수 전달 > 상태변수가 변화할 때마다 호출된다.

useEffect(()=>{
	console.log(`state update : {state}`);
}, [state]);

✔️ Update 시점의 useEffect와의 차이 : 각 상태 변수의 값의 변화 때마다 호출되는 함수를 구현할 수 있다. (감지하고 싶은 값에 대해서만 감지 가능)

 

UnMount 시점의 useEffect

useEffect(()=>{
    console.log("Mount!");
    
    return () => {
    	// Unmount 시점에 실행됨
        console.log("Unmount!");
    };
}, []);

Mount를 제어하는 useEffect의 콜백함수가 함수를 리턴하게 하면 된다.

리턴하는 함수는 해당 컴포넌트의 unmount 시점에 호출된다!

 

💡 중간 짬 지식 : 단락회로평가

{ isVisible && <UnmountTest />}

: isVisible가 true면 <UnmountTest/>가 반환되어 화면에 렌더링된다. 하지만 isVisible 값이 false면 단락회로평가가 이루어져 UnmountTest컴포넌트를 렌더링하지 않는다. 👉 단락 회로 평가를 사용하면 컴포넌트를 렌더링 할지 말지를 쉽게 결정할 수 있다!!

 

정리

LifeCycle을 제어하면 한 컴포넌트의 Mount, Update, UnMount 순간, 그리고 특정 값이 변화하는 순간까지 추적할 수 있다!

---

7년전인가... 안드로이드 배울 때 안드로이드 생명주기 배웠었는데 왜 배우는지도 모르겠고 그게 뭔지도 이해가 안갔었던 기억이 떠올랐다.

실무에서 일해보며 여기저기 부딪혀보고 나니 이제야..LifeCycle의 의미가 이해가 간다.

 

출처 : Udemy '한입 크기로 잘라먹는 리액트' (이정환)