[리액트 스터디] 6장. 라이프 사이클 (생명주기)

라이프 사이클이란?

리액트 컴포넌트의 라이프 사이클 3단계

💚Mount(탄생) ===> 💙Update(업데이트) ===> 💜Unmount(죽음)

• Mount : 페이지에 나타남.
• Update : state, props 업데이트, 부모 컴포넌트 리렌더.
• Unmount : 페이지에서 제거됨.

useEffect

어떤 값이 변경될 때마다 특정 코드를 실행하는 리액트 훅

🔰 useEffect의 용법

useEffect(callback함수, [deps]);
✔ [deps]: 의존성 배열. 이 배열의 요소 값이 변경되면 콜백함수를 실행.

💬 예시1. count가 변경되면 console.log 실행

useEffect(() => {
	console.log("count 업데이트: ", count);
}, [count]);

💬 예시2. count, txt가 변경되면 console.log 실행

useEffect(() => {
	console.log("업데이트: ", txt, count);
}, [count, txt]);

💬 예시3. 의존성 배열 X → 모든 컴포넌트 렌더링때마다 실행

useEffect(() => {
	console.log("컴포넌트 업데이트");
});

🔰 업데이트 시점에만 실행하기 (마운트 시점 제외)

👉 useRef + 조건문 사용

import { useRef, useEffect, useState } from "react";
function App() {
	(...)
    const didMoutRef = useRef(false);
	useEffect(() => {
    	if(!didMoutRef.current){
        	didMoutRef.current = true;
            return;
        } else {
        	console.log("업데이트!");
        }
    });
    return (
    	(...)
    );
}
export default App;

🔰 마운트 제어하기

👉 의존성배열에 비어있는 [ ] 넣기 → 업데이트 지켜볼 대상 없음을 뜻함

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

🔰 언마운트 제어하기

👉 클린업

useEffect(() => {

	(...콜백함수 실행)
    
    return () => {
    	//클린업 실ㄹ행 부분
        console.log("클린업");
    };
});