React - setInteval , useInterval

SeungMin·2022년 8월 28일
0

Havaianas 사이트의 최상단에는 Navbar가 위치하고있다.
근데 다른 사이트와는 다른점이 있다.

  • 자동으로 슬라이드가 움직인다.
  • 버튼으로도 슬라이드가 움직인다.
  • 버튼으로 슬라이드를 움직인 후에는 자동으로 움직이던 딜레이가 초기화된다.(다시 딜레이가 set되는듯)

해당 기능을 클론하기 위해서 열심히 구글링을 해봤지만..

찾을 수가 없었다...

여러가지 시도를 해봤는데,

  1. 버튼의 onClicksetInterval을 적용시켜봤다.

    • 버튼을 누를 때마다 setInterval이 중첩되어 슬라이드가 미쳐날뛰었다.


  2. NavBar가 처음 렌더링될 때 useEffectsetInterval을 호출하여
    자동으로 슬라이드가 움직이게 만든 후, 버튼을 누르면 추가적으로 움직이게 한다.

    • setInterval 첫 렌더링때 실행된 후 한번의 주기를 돌면 고장이난다.
      관리자 모드를 열어서 확인해보니 Hook관련 에러가 계속해서 발생하는중이었다.
      setIntervalreact의 동작 구조 개념에서 발생하는 현상이라고 한다.
  3. useInterval을 사용한다.

    • useInterval이라는 별도로 제작된 커스텀 훅을 사용하면
      Interval과 버튼은 독립적으로 잘 작동 했습니다.

    • 하지만 버튼을 눌렀을 때 Interval의 딜레이가 초기화되지 않았습니다.
      딜레이가 1000ms라고 가정할 떄 900ms를 지나가는 시점에 버튼을 클릭하게되면
      버튼클릭으로 슬라이드가 움직이고, 1000ms가 달성되는 시점에
      슬라이드가 곧바로 다시 움직이기 시작하면서 순식간에 2번을 이동하게 되는 것입니다.


여러 글을 찾아보던 중 useInterval의 선언코드 내부에
내부적으로 clearInterval이 발동되는 조건이 적힌 글을 봤습니다.

그 조건중 하나가 Delay 가 변할 떄 동작된다는 것입니다.

그래서 최종적으로 작성된 코드는 아래와 같습니다.

 useInterval(() => {
    if (currentPosition > 2) {
      setTransitionTime(0);
      setCurrentPosition(-2);
      setTimeout(() => {
        setTransitionTime(() => 0.5);
        setCurrentPosition(() => -1);
      }, 100);
    } else {
      setCurrentPosition(prev => prev + 1);
    }
  }, 3000 + resetAuto);

useInterval 의 최하단부 Dealy 선언부에
미리 만들어놓은 resetAuto 라는 state를 같이 사용해서

버튼을 누르면 setResetAuto가 실행되며 딜레이가 변화되게끔 만들어서
useInterval을 초기화해주는 방식입니다.


마치며..

코드를 완성하고 드는 아쉬움은

처음 useInterval 을사용할 때
이 커스텀훅이 어떤 구조인지 , 코드안에 쓰여진게 각각 어떤 역할을하는지,
서로의 연관성이 무엇인지

그러한 부분을 전부 파악하고 처음 사용했다면
곧바로 성공할 수 있었다고 생각합니다.

프로젝트 완성에 급급하여 useInterval이 정확히 어떻게 동작되는지
알지못하고 사용했기 때문에 이후에 Delay 부분을 다시 알게되기까지
시간이 너무 소요된점이 아쉽습니다..

profile
공부기록

0개의 댓글