React - useEffect

1. 개요

useEffect를 사용해서 리액트의 생명주기를 확인할 수 있다.

리액트 컴포넌트의 생명주기는 총 3가지가 있다. 

 

Mount : 화면에서 나타

Update : 리렌더

Unmount : 화면에서 사라짐

 

2. 사용 방법

useEffect도 마찬가지로 리액트의 기능이기 때문에 state와 useRef 같이 import 해준다.

import React , { useEffect } from "react";

useEffect의 기본 구성은 이렇게 나타난다.

useEffect(()=>{
	// Callback함수
}, []);		// dependency Array(의존성 배열)
			// 이 배열안에 들어있는 값이 변화하면 콜백 함수가 실행됨

2-1 mount 할 때만 실행

컴포넌트가 화면에 처음 나타날 때를 mount한다라고 하는데, mount는 dependency Array가 빈배열일 때 실행된다. 

import React,  { useEffect, useState } from "react";

const Lifecycle = () =>{
	const [count, setConut] = useState(0);
    const [text, setText] = useState("");
    
    useEffect(()=>{
    	console.log("Mount");
    },[]);
    
    return (
    	<div>
        	{count}
            <button onClick={()=> setCount(count+1)}>+</button>
        </div>
        <div>
        	<input value={text} onChange={(e) => setText(e.target.value)} />
        </div>
   );
   
export default Lifecycle

이렇게 버튼을 클릭하면 숫자가 증가하기 때문에 컴포넌트가 리렌더링이 되는데도 불구하고 callback함수는 한번만 실행된다. 

그 이유는 dependencyArray가 빈배열이기 때문이다.

2-2 update할때마다 실행

update 즉, 리렌더링이 될 때마다 실행시키기 위해서는 dependencyArray를 전달하지 않으면 된다.

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

이런식으로 배열을 전달하지 않으면 컴포넌트가 업데이트 할때마다 useEffect가 실행된다.

 

+ 추가로 사용자가 원하는 값이 변할 때만 callback함수가 실행되게 하기 위해서는 dependencyArray의 값이 변화하면 된다.

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

이런식으로 변하는 값을 넣어주면 이 값이 변할때마다 callback함수가 실행된다.

    useEffect(()=>{
    	console.log("원하는 값 업데이트");
        if(count>5){
        	alert("count가 5를 넘었습니다. 따라서 다시 1로 초기화합니다.");
            setCount(1);
    },[count]);

좀더 재미있게 변경을 하면 이런식으로 count가 5가 넘어가면 alert창을 띄우고 count를 1로 변경할 수 있다.

2-2 Unmount 할 때만 실행

useEffect(()=>{
	console.log("mount 입니다.");			// mount 할때
    return () =>{
    	console.log("unmount 입니다.");	// unmount 할때
    };
}, []);

mount 할때에 추가로 return 함수를 생성해주면 return함수는 unmount할 때 실행된다.