[Hook] useEffect

컴포넌트가 렌더링 할때 또는 특정 상태 변경시 특정 작업을 해야 할때 사용

 

• 예 : API 통신(fetch), Indexed DB 에서 데이터를 새로 가져온다거나
• 트리거 처럼 동작하여 특정 행동을 수행
• 컴포넌트가 제거될때 clean 동작 수행

 

인자값으로는 2개가 있으며, 첫번째 인자값은 콜백함수로 주로 람다함수를 사용한다.

두번째 인자값을 잘 살펴보아야 하는데, 배열값이 들어가게 된다.  배열에는 state 변수값이 들어간다.

useEffect(() => {
	...
});

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

useEffect(() => {
	...
},[state변수]);

• 두번째 인자값이 없을경우
  • 재 렌더링이 수행될 때마다 실행
• 두번째 인자값이 빈 배열일 경우
  • 처음 렌더링 후에 한번만 실행됨
• 두번째 인자값에 state 변수가 있을경우
  • state 변수가 변경 될 때마다 실행

 

useState 와 같이 사용하는 타이머 예제를 본다면, 

import { useEffect, useState } from "react";

export function Time()
{
    const [timeVal,SetTime] = useState(new Date());

    useEffect(()=>{
        const interval = setInterval(() => {
            SetTime(new Date());
        }, 1000);
        
        //return 은 해당 컴포넌트가 다 쓰고 unbound 될 때 할 일을 정해줌
        return () => {
            clearInterval(interval);
        }
    },[]);

    return (
        <div className="w-full h-full flex flex-col justify-center items-center text-center">
            <p>{timeVal.toLocaleTimeString()}</p>
        </div>
    );
}

 

 

위의 예제에서, 특정 state 가 변경 되었을때 실행되는 effect를 본다면

...

 useEffect(() => {
        console.log("time changed");
    },[timeVal]);

...