react에서 clearInterval이 작동하지 않습니다! (슬라이드쇼가 무한이 생성돼요/.....)

Question

안녕하세요..React에서 setInterval 한 번 사용했다가 일주일째 고통받고 있는 영혼입니다... 일반 HTML에서 Setinterval 잘 사용하다가 React에서 너무나도 고통받고 있어 이렇게 질문 드립니다. 우선 App.js입니다. 라우터로 페이지 이동을 하게 만들었으며,문제의 슬라이드 쇼는

컴포넌트 안에 들어있습니다. Main.js에는 최상단에 const silde()라는 SetInterval 슬라이드쇼가 있습니다.그리고 Const Main 안에 slide() 함수를 실행 시켰습니다. 라우터를 통해 메인.js를 렌더할 시 슬라이드쇼는 정상 작동합니다. 이제 라우터를 통해 다른 페이지로 이동 시ClearInterval(slide)을 작동시키게 해놨는데요,ClearInterval이 작동을 하지 않습니다.... (setInterval이 계속 작동해서콘솔에 document.getelementbyid('slide')를 찾을 수 없다는 에러가 계속 뜸) 라우터에서 에서도 뭘 클릭해도 ClearInterval이 작동하도록 아예 ClearInterval을 도배해놨는데도 작동을 안합니다 ㅠㅠㅠ (심지어 console.log로 onClick이 잘 눌러지나 확인해봐도 다른 모든 함수를 잘 작동합니다. 오직 ClearInterval만이 작동을 안합니다........) 게다가 다른페이지에서 Main.js로 돌아올 경우 슬라이드쇼가 또 생성돼서 슬라이드쇼 속도가 2배로 빨라집니다. 근데 또 다른 페이지에 갔다오면 4배로 빨라집니다. 그다음은 8배..... 여기서 질문을 드립니다.1. ClearInterval을 사용할 수 있는 방법2. 그게 안된다면, Route를 통해 Main.js가 렌더됐을 때만 SetInterval을 작동시킬 수 있는 방법 okky 개발자분들의 많은 관심과 사랑 부탁드립니다....

siyex42080 · Accepted Answer

&#64;moonti님 말처럼 리액트 자체를 잘못 사용 하고 계신 것도 맞지만 clearInterval 함수도 잘못 사용하고 계십니다. useEffect를 사용하시고 document는 사용하지 마시고 (document.getElementsByClassName 포함) clearInterval은 사용법을 다시 확인하세요.

moonti · Answer

리액트의 동작을 이해를 더 하셔야 할것같은데요.왜 useEffect를 사용하는지 보세요.

하얀뼈 · Answer

&#64;moonti 지금 해결을 위해 물론 관련 문서도 보고 공부도 하고 있습니다.하지만 지금 저의 상황과 연결시키는 것이 너무나도 어려워서 이렇게 도움을 요청하게 됐습니다.

하얀뼈 · Answer

siyex42080 친절한 답변 감사합니다.

라는 녀석을 왼쪽으로 움직이려면 document.getElementById('slide')를 사용하지 않으면 도저히 요소에 다가갈 수 있는 방법이 없을 것 같은데... 이걸 사용하지 않고 #slide에 다가가려니 도저히 방법을 모르겠네요....

푸르게 · Answer

요소 접근은 useRef 를 사용하면 됩니다.

하얀뼈 · Answer

&#64;푸르게 맙ㅋ소사ㅋ맨날 사용하던거면서도 전혀 생각도 못하고 있었네요이제서야 뭔가 덤벼볼 자신감이 생겼습니다. 감사합니다

react에서 clearInterval이 작동하지 않습니다! (슬라이드쇼가 무한이 생성돼요/.....)

6개의 답변

Q&A 목록