원하는 타이밍에 동작해보기 (useEffect)

오늘은 useEffect에 대해 공부해보자!!

 

hook 중에서 사용하는게 어렵다고 생각하는 것 중 하나가 useEffect이다.

뭔가.. 확실하게 이해하고 사용한다는 느낌이 아니라서 이번에 공부해서 내 것으로 만들어보자!!

 

useEffect

컴포넌트가 렌더링 될 때 마다 특정 작업을 실행할 수 있도록 하는 hook

 

3가지 상황에서 특정 작업을 처리할 수 있다!

1. 컴포넌트가 mount 되었을 때
2. 컴포넌트가 unmount 되었을 때
3. 컴포넌트가 update 되었을 때

코드르 통해 살펴보자

import { useEffect } from "react";

// 1. 컴포넌트가 mount 되었을 때
useEffect(()=>{
    console.log("mount!");
}, []);

// 2. 컴포넌트가 unmount 되었을 때
useEffect(()=>{
    // cleanup 함수 = 뒷정리 함수
    return () => {
        console.log("unmount!");
    };
}, []);

// 3. 컴포넌트가 update 되었을 때
// 3-1) 상태가 변경될 때마다 실행하고 싶은 경우
useEffect(()=>{
    console.log("update");
});

// 3-2) 의존성 배열의 값이 변경된 경우에만 실행하고 싶은 경우
useEffect(()=>{
    console.log(`count is update: ${count}`);
}, [count]);