[React] useEffect의 mount, update, unmount 사용법

🌄 Mount

화면에 맨 처음 렌더링 될 때 (탄생)

useEffect(()=>{}, []);

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

빈배열을 전달하면 mount 될 때 실행!

예시

컴포넌트가 마운트 될 때, 데이터를 불러오는 코드 작성 등

🌅Update

변화, 리렌더링

useEffect(()=>{});

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

배열을 생략하고 콜백함수만 인자로 전달하면 리렌더링이 될 때 콜백함수가 실행됨

• mount 될 때도 같이 실행됨

mount될 때는 말고, update 될 때만 실행하고 싶다면?

useRef를 이용해 Flag역할을 하는 변수 하나 생성

const isMounted = useRef(false);

useEffect(()=>{
	if (!isMounted.current) {
    	isMounted.current = true;
      	return;  // 강제종료 (else써도됨)
    };
  	console.log("only update");
})

예시

update될 때, 현재 업데이트된 state값들이 정상적인 값인지 검사하는 기능 등

🌆UnMount

화면에서 사라질때(죽음)

useEffect(()=>{
	return () => {};
}, []);

정리함수, 클린업 사용
= useEffect의 콜백함수가 반환하는 함수

count가 짝수일 때만 나타나는 컴포넌트 Even

// Even.jsx
import { useEffect } from "react";

const Even = () => {
  useEffect(() => {
    // useEffect의 콜백함수가 반환하는 함수
    // 정리함수 or 클린업
    return () => {
      console.log("unmount");
    };
  }, []);
  return <div>짝수입니다</div>;
};

export default Even;

// App.jsx
<Viewer count={count} />
{count % 2 === 0 ? <Even /> : null}

빈배열 -> 마운트될 때 실행
종료는 언마운트 될 때 실행되기 때문에 언마운트될 때, return문 실행
그래서 밑 코드와 같이 쓰면 마운트 될 때는 => "이건?" 출력
언마운트 될 때는 => "unmount" 출력

import { useEffect } from "react";

const Even = () => {
  useEffect(() => {
    // useEffect의 콜백함수가 반환하는 함수
    // 정리함수 or 클린함수
    console.log("이건?");
    return () => {
      console.log("unmount");
    };
  }, []);
  return <div>짝수입니다</div>;
};

export default Even;

예시

컴포넌트가 언마운트될 때, 해당 컴포넌트에서 사용하던 메모리를 해제하는 최적화 작업 진행 등

'한입 크기로 잘라먹는 리액트' 강의를 보고 정리했습니다.