useEffect - 렌더링이 일어났을 때 특정 작업 실행

언제 사용하나?

mount (화면 첫 렌더링)
Update (다시 렌더링)
Unmount  (화면에서 사라질 때) 

 

위의 상황에서 => 특정 작업을 실행해주고 싶을 때 

 

 

필요에 따라서 사용법 - ( 2가지 )

1. component가 렌더링 될 때마다 useEffect 실행하고 싶을 때

 

사용법)  useEffect() 의 첫 번째 인자만 함수를 준다. ( useEffect( ()=>{} ) )

import { useEffect } from "react";
function Component(){
    useEffect(()=>{
        //실행할 작업
    })
};

 

 

2. useEffect를 필요한 상황에만 실행하고 싶은 경우 

 

사용법) useEffect의 첫 번째 인자로 함수 + 두 번째 인자로 배열을 준다. ( useEffect( ()=>{} , [ ]  )  )

* 이 배열을 Dependency Array라 부른다.

 

 

2-1  화면이 첫 렌더링 됐을 때만 1번만 useEffect 실행 =>   빈 배열을 인자로 주면 된다.

import { useEffect } from "react";
function Component(){
    useEffect(()=>{
        //실행할 작업
    },[]) // 첫 렌더링에만 실행됨.
};

 

 

2-2 화면이 첫 렌더링 됐을 때 + 특정 변수의 값이 변경됐을 때 useEffect 실행  => 배열에 변수를 함께 인자로 주는 경우

import { useEffect } from "react";
function Component(){
    const [count, setCount] = useState(0);

    useEffect(()=>{
        //실행할 작업
    },[count]); // 첫 렌더링 + count의 값이 변경될 경우
};

ex) setCount((count) => (count+1)) 이렇게 count가 변경될 경우 useEffect 실행

 

 

+ ( useEffect() 에서 return을 사용하는 경우)

UseEffect에서 return 사용 (clean up)

 

 

사용 예시) 

기능)

처음 렌더링 됐을 때 + itemCount의 값이 변경될 때 마다 =>  console 출력

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

function ItemPage(){
    const [itemCount, SetItemCount] = useState(0);

    useEffect(()=>{
        console.log(`itemCount값이 ${itemCount}으로 값이 변경되었습니다.`);
    },[itemCount])
    
    const changeHandler = (e)=>{
        SetItemCount(e.target.value);
    }

    return(
        <input type="number" value={itemCount} onChange={changeHandler}/>
    )
}

export default ItemPage;

 

또 다른 문제?
여기서 처음 렌더링 시에 console.log가 2번 출력 되는건 

=> <React.StrictMode> 모드를 사용해서 그렇다. 자세한건 다음에 알아보자