인프런 커뮤니티 질문&답변
작성한 질문수
next.js 에서 이와 비슷한 예제를 돌리고있는데 react랑 달라서 질문 드립니
해결된 질문
작성
·
368
1
import React, { useState, useEffect } from "react";
const CountdownTimer = () => {
const [countdown, setCountdown] = useState(10); // 초기 카운트다운 값
useEffect(() => {
let intervalId;
console.log("다시 실행");
// 카운트다운이 실행 중일 때만 setInterval을 설정
intervalId = setInterval(() => {
setCountdown((prevCountdown) => prevCountdown - 1);
}, 1000);
// 컴포넌트가 언마운트될 때 clearInterval 호출
return () => {
console.log("종료");
clearInterval(intervalId);
};
}, []); // isRunning 상태가 변경될 때마다 useEffect가 호출됨
return (
<div>
<p>Countdown: {countdown}</p>
</div>
);
};
export default CountdownTimer;이런 예제를 돌리고 있는데 useEffect에 인자를 설정하지 않아도 제대로 돌아가고 있습니다 제가 next.js를 이용해서 실습중인데 이게 nextjs여서 돌아가는건가요 아니면 react가 업데이트를 한 것인가요?
답변 4
0
잘 이해가 안돼서 그러는데 궁금한점이 3가지 입니다
"useEffect안에 countdown을 안 쓰니까 제대로 돌아간다"에 대해서 조금더 자세히 설명해 주실수 있나요?
setState이 함수형 이라는 것이 제가
setCountdown((prevCountdown) => prevCountdown - 1);이렇게 쓴것을 말하는 건가요?
그렇다면
setInterval(setCountdown((prevCountdown) => prevCountdown - 1), 1000);setInterval(() => { setCountdown((prevCountdown) => prevCountdown - 1); }, 1000);이 두 코드의 차이점이 어떻게 되나요?
useEffect에 deps가 없으므로 한 번만 실행되고 setInterval도 한 번만 실행됩니다.
네 맞습니다.
음... 이건 자바스크립트 완전 기초인데요. 함수의 선언과 함수의 호출은 다르다는 제 인간js엔진되기 유튜브 영상 보시길 바랍니다. 첫 번째 코드는 말도 안 되는 코드입니다. onClick={func} 대신 onClick={func()} 같은 코드입니다.
음 제가 마운트와 언마운트를 잘 이해를 못한거 같네요 제로초님 예제에서
setImgCoord(rspCoords.가위)이렇게 되어있으면 ImgCoord의 사진을 변경을 하면서 원래 있었던 사진 언마운트 되고 다시 새로운 사진으로 마운트가 되는데
setInterval(setCountdown((prevCountdown) => prevCountdown - 1), 1000);이렇게 함수형으로 작성을 하면 원래있던 컴포넌트가 함수형으로 숫자만 줄게 되면서 마운트되었다 언마운트가 되었다가 안되는건가요?
지금 setInterval(함수()) 자체가 말이 안 된다니깐요? setInterval(함수)여야 합니다.
그... 혹시 setInterval(함수()) 이런 코드를 보신 적이 있으신가요?
함수형으로 작성하면 언마운트/마운트는 됩니다. 다만 useEffect 빈 deps 자체가 실행되지 않습니다.
잘 이해가 안가는데
intervalId = setInterval(() => { setCountdown((prevCountdown) => prevCountdown - 1); }, 1000);이런식으로 setInterval를 쓰는게 완전 잘못된 코드라는 건가요?
여기 블로그를 참고해서 만들었는데
왜 잘못된코드인가요?
갑자기 코드를 바꾸셨는데요. 위에서는 이렇게 하셨잖아요. 이 코드가 말이 안 된다는 겁니다.
setInterval(setCountdown((prevCountdown) => prevCountdown - 1), 1000);다음 코드는 말이 되는 코드이고요.
setInterval(() => { setCountdown((prevCountdown) => prevCountdown - 1); }, 1000);https://youtu.be/NS1cIsWlFGI?si=hPrb2Qsv_cYiSBHg
function func() {} 가 있을 때
setTimeout(func)는 말이 되지만
setTimeout(func())는 말이 안 되는 코드인 겁니다.
setInterval도 마찬가지이고요.
useEffect 안에 countdown을 안 쓰니까 제대로 돌아가는 겁니다.