react에서는 setInterval()을 쓸 때 원하는 대로 동작하지 않는다.
setInterval
: 리엑트에서는 렌더링 문제로 인해서 사이드 이펙트를 분리하는 구조를 중요시해야한다.
- 입력을 받아서 출력을 받는 직접적인 일이 아니면 사이드 이펙트를 분리
- 따라서 useEffect 안에서 실행한다.
따라서 useInterval hooks을 사용한다.
즉, custom hook을 만들어서 사용한다.
function useInterval(callback, delay) {
const savedCallback = useRef();
useEffect(() => {
savedCallback.current = callback;
}, [callback]);
useEffect(() => {
function tick() {
savedCallback.current();
}
if (delay !== null) {
let id = setInterval(tick, delay);
return () => clearInterval(id);
}
}, [delay]);
}
function Test(){
const [count, setCount] = useState(0);
useInterval(()=>{
setCount(count => count+1);
}, 1000);
}
출처
https://falaner.tistory.com/52
[react] 리액트 hooks :: setInterval 사용시 문제점과 해결 방법 - ①
지금 다뤄볼 내용은 리액트에 대한 최소한의 지식이 있어야 이해가 가능 할 수 있는 부분이다. setInterval 함수를 사용했을 때 리액트 내부에서 일어나는 현상과 그런 현상이 발생했을 때 어떻게
falaner.tistory.com
[React] 무한 슬라이드 만들기 (infinite carousel)
어느 날 [원티드 프리온보딩 프론트엔드 코스] (https://www.wanted.co.kr/events/preonboardingcourse_6) 모집 글을 보게 되었다. 좋은 기회인 것 같아 신청하려고 했으나 코스 기간이 근무 기간과 겹쳐 아쉽게
velog.io
[React] React Hooks에서 setInterval() 사용 문제
useEffect 사용 시 무한루프에 빠지는 경우 의존성 배열을 전달하지 않았을 때 의존성 배열 내의 값을 이펙트 함수 내에서 수정하고 있을 때 https://jungpaeng.tistory.com/92 커스텀 훅을 만들어야 한다. us
velog.io
번역 / 리액트 훅스 컴포넌트에서 setInterval 사용 시의 문제점
Dan abramov의 https://overreacted.io/making-setinterval-declarative-with-react-hooks/ 번역입니다.All copyrights to Dan Abramovtranslated by Jake seoTHE
velog.io
https://www.youtube.com/watch?v=2tUdyY5uBSw
https://velog.io/@yunkuk/React-setInterval-setTimeout-%EC%9D%B4%EC%83%81%ED%95%B4
React setInterval, setTimeout 이상해
react 타이머를 다룰 때 의도한 대로 동작을 잘 하지 않을 것이다. React의 프로그래밍 모델과 setInterval 사이의 불일치로 보는 사람도 많다. setInterval - useEffect Q. >프로모션 오픈 시간에 맞춰 카운트
velog.io
https://codesandbox.io/s/105x531vkq?file=/src/index.js
105x531vkq - CodeSandbox
105x531vkq using react, react-dom, react-scripts
codesandbox.io
https://ye-yo.github.io/react/2022/01/21/setInterval%EC%82%AC%EC%9A%A9%EB%AC%B8%EC%A0%9C.html
React Hooks에서 setInterval() 사용 문제 - Hyoeun Yeah!
자동 슬라이드 기능을 구현하면서 setInterval()을 써야했는데 원하는대로 동작하지 않았다. 그래서 문제 상황과 원인 그리고 해결방법을 공부하게 되었고, 공부한 내용을 토대로 정리해보려고 한
ye-yo.github.io
https://gist.github.com/iamBevan/171cce94431b8c95206086252ce0c6c7
Dan Abramov's useInterval in Typescript
Dan Abramov's useInterval in Typescript. GitHub Gist: instantly share code, notes, and snippets.
gist.github.com
'Development > React.js' 카테고리의 다른 글
| 리엑트 조건부 렌더링 (0) | 2022.05.03 |
|---|---|
| Styled Components를 Global에서 사용하기 (0) | 2022.05.02 |
| 리엑트에서 swiper 사용하기 (0) | 2022.05.01 |
| Next.js의 Image를 사용하기 (0) | 2022.04.30 |
| [REACT] 리액트에서 줄바꿈 처리 (0) | 2022.04.30 |