next.js 에서 이와 비슷한 예제를 돌리고있는데 react랑 달라서 질문 드립니
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
지금 코드에서 셋인터벌은 당연히 잘 작동하죠. setState도 함수형 setState이고요. 제 강의랑 전혀 다른 예제입니다.
0
잘 이해가 안돼서 그러는데 궁금한점이 3가지 입니다
"useEffect안에 countdown을 안 쓰니까 제대로 돌아간다"에 대해서 조금더 자세히 설명해 주실수 있나요?
setState이 함수형 이라는 것이 제가
setCountdown((prevCountdown) => prevCountdown - 1);이렇게 쓴것을 말하는 건가요?
그렇다면
setInterval(setCountdown((prevCountdown) => prevCountdown - 1), 1000);setInterval(() => { setCountdown((prevCountdown) => prevCountdown - 1); }, 1000);이 두 코드의 차이점이 어떻게 되나요?
0
useEffect에 deps가 없으므로 한 번만 실행되고 setInterval도 한 번만 실행됩니다.
네 맞습니다.
음... 이건 자바스크립트 완전 기초인데요. 함수의 선언과 함수의 호출은 다르다는 제 인간js엔진되기 유튜브 영상 보시길 바랍니다. 첫 번째 코드는 말도 안 되는 코드입니다. onClick={func} 대신 onClick={func()} 같은 코드입니다.
0
음 제가 마운트와 언마운트를 잘 이해를 못한거 같네요 제로초님 예제에서
setImgCoord(rspCoords.가위)이렇게 되어있으면 ImgCoord의 사진을 변경을 하면서 원래 있었던 사진 언마운트 되고 다시 새로운 사진으로 마운트가 되는데
setInterval(setCountdown((prevCountdown) => prevCountdown - 1), 1000);이렇게 함수형으로 작성을 하면 원래있던 컴포넌트가 함수형으로 숫자만 줄게 되면서 마운트되었다 언마운트가 되었다가 안되는건가요?
0
지금 setInterval(함수()) 자체가 말이 안 된다니깐요? setInterval(함수)여야 합니다.
그... 혹시 setInterval(함수()) 이런 코드를 보신 적이 있으신가요?
함수형으로 작성하면 언마운트/마운트는 됩니다. 다만 useEffect 빈 deps 자체가 실행되지 않습니다.
0
잘 이해가 안가는데
intervalId = setInterval(() => { setCountdown((prevCountdown) => prevCountdown - 1); }, 1000);이런식으로 setInterval를 쓰는게 완전 잘못된 코드라는 건가요?
여기 블로그를 참고해서 만들었는데
왜 잘못된코드인가요?
0
갑자기 코드를 바꾸셨는데요. 위에서는 이렇게 하셨잖아요. 이 코드가 말이 안 된다는 겁니다.
setInterval(setCountdown((prevCountdown) => prevCountdown - 1), 1000);다음 코드는 말이 되는 코드이고요.
setInterval(() => { setCountdown((prevCountdown) => prevCountdown - 1); }, 1000);0
https://youtu.be/NS1cIsWlFGI?si=hPrb2Qsv_cYiSBHg
function func() {} 가 있을 때
setTimeout(func)는 말이 되지만
setTimeout(func())는 말이 안 되는 코드인 겁니다.
setInterval도 마찬가지이고요.
0
빈배열을 넣을 경우 컴포넌트가 마운트, 언마운트될 때 한 번씩 실행됩니다.
0
isRunning 상태가 뭔가요?
0
useEffect 에 인자를 설정하지 않았다는게 useEffec(() => {}, [deps]) 에서의 deps를 말하시는 건가요?
원래 [] 는 컴포넌트가 마운트되면 1번 실행됩니다.
next와는 관련없습니다.
0
강의 영상에서는 [deps]에서 deps를 설정하지 않으면 업데이트가 한번만 일어난다고 되어있는데 저렇게 deps를 설정하지 않아도 setInterval이 정상적으로 작동합니다
npm run dev 실행 시 포트가 안뜨는 문제
0
202
2
timeouts.current를 useEffect 의 input값으로 넣었을때
0
85
2
렌더링 테스트 코드 (Hooks)
0
80
1
Cannot find package 'react-refesh' 이런 에러 뜨시는 분들 보세요.
0
149
1
해당 에러 뜨는 분들 보세요. "Uncaught TypeError: ReactDom.createRoot is not a function"
1
191
1
강사님 레포지토리에서 코드 복사 시 master 브랜치 말고 react18 브랜치꺼 복붙하세요ㅠㅠ
0
95
1
useMemo와 useCallback 사용 시기
0
205
2
onRightClickTd가 작동을 하지 않습니다.
0
226
1
action.type 불러오는 방식
0
222
2
onClickRedo 질문
0
172
1
const Try = require(./Try) 빨간줄
0
248
1
npx webpack 실행시
0
313
1
지뢰찾기 강좌에서 빈칸들 한번에 열기 파트에서 여쭤보고싶은부분이 있어서 글 올립니다.
0
234
1
강좌에서 다루지 않은 기능들은 어떻게 학습하면 좋을까요?
0
311
1
react devtool이 enable 않됩니다.
0
530
2
React 랜더링이 되지 않습니다.
0
409
2
비동기로 동작하는 setState에 대해서
0
331
1
npm run dev 할 때 에러발생
0
478
2
memo, PureComponenet, shouldComponentUpdate 관련 질문
0
206
1
devMiddleware의 필요성
0
352
1
리액트에서 화살표 함수를 사용해야하는 이유
0
933
2
path.join관련질문
0
281
2
2-9. 웹팩 데브 서버와 핫 리로딩 설치과정 시 에러
0
373
1
useInterval.js 커스텀 훅에서, 왜 첫번째 useEffect를 계속 반복해야할까요?
0
463
2