오늘의 이야기!
나는 슬라이드를 라이브러리 없이 구현하려는 와중에,,,,, setInterval함수를 사용하려고 했는데, 여기서 문제가 생겼다.
useRef에 setInterval함수를 할당해서 사용하려고 하는데, typeScript에서는 처음 사용하다보니 type을 어떤 것으로 해줘야 하나 고민이었다.
(왜 useRef에 할당해서 사용해야하는지는, 빠른시일내로 게시글을 올리겠다)
구글링을 해본 결과
const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null)
intervalRef.current = setInterval(() => {
setCurIdx((prevIdx) => prevIdx + 1);을 사용하라는 결과가 나왔다. 그런데 여기서 문제는, typeScript자체도 잘모르는데 아무거나 막쓰고 싶지는 않았다.
정확히는 ReturnType이 어떤식으로 어떻게 왜 사용되는지 알지 못하기 때문에 사용하기 싫었다. 현재는 일을 하고있는 상태는 아니기 때문에,
더 알아보고 사용하려고 했지만 typeScript자체의 이해도가 낮아서 사용하지 못했고 이것도 따로 공부를 더 해봐야겠다.
결론은?
그래서 다시 찾아본 결과
const intervalRef = useRef<number | null>(null);
intervalRef.current = window.setInterval(() => {
setCurIdx((prevIdx) => prevIdx + 1);이런식으로 할당해서 사용할 수 있는 것도있었다.
이게 가능한 이유는 setInterval return 값이 숫자이기 때문에 가능한 것이다.
The returned intervalID is a numeric, non-zero value which identifies the timer created by the call to setInterval(); this value can be passed to clearInterval() to cancel the interval.
retrun 값으로 숫자를 주고, 이 숫자는 setInterval()에서 종료시킬때 사용한다고 한다. 또한 console.log를찍어보면 숫자로 나온다
참고 : MDN setInterval()
그런데 window를 사용하지 않을때 동작되지 않는 이유가 Node.js에서는 return 값을 Timer로 하기때문에 되지 않았던 것이다.
window객체에서는 setInterval이 리턴값이 number로 동작을 했다.
참고 : What Is the Correct TypeScript Return Type for JavaScript's setInterval() Function?
마무리
잘 모르는 것을 다시 공부하는 느낌으로 포트폴리오 한개를 열심히,,? 하고 있지만 진척이 없는 느낌이다!
아무래도 계속 해야지 반복했던 동작부터 시키기가 잘 지켜지지 않아서 더 그런 것 같다. 일단 만들고 나중에 공부해야지 라는게 잘 안되는?
그런 기분이다. 정말 기초가 많이 부족하다는 것을 느끼고 있고, 시간 분배가 너무 어렵다!!!
