JS' 공부흔적
[React] useEffect 최초 렌더링 무시하기 본문
useEffect에 deps 배열에 특정 값을 넣으면, 다음의 2가지 경우에 useEffect 내의 콜백 함수가 실행된다.
- 컴포넌트가 마운트 될 때
- deps 배열 내의 값이 변경될 때
그러나 1의 경우에는 콜백 함수를 실행하지 않고, 2의 경우에만 콜백 함수를 실행해야 할 때도 있을 것이다.
그럴 때는 아래와 같이 isMounted라는 state를 선언하여 활용하면 된다.
const [isMounted, setIsMounted] = useState(false);
useEffect(() => {
if (isMounted) {
~~
} else {
setIsMounted(true);
~~
}
}, [something]);
최초에는 isMounted가 false이므로 useEffect 내의 콜백함수 중 else 부분을 실행한다. 따라서 처음에는 실행하고 싶지 않은 부분은 if (isMounted) 내에 넣으면 된다.
728x90
반응형