FrontEnd/React
[Hook] useEffect
Dean83
2024. 10. 11. 15:01
컴포넌트가 렌더링 할때 또는 특정 상태 변경시 특정 작업을 해야 할때 사용
- 예 : 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]);
...