[React Native] 타이머 실행 중 중도 취소 기능(setTimeOut, useRef)

매칭 버튼을 누르면 매칭 중 모달이 뜨고, 2초 뒤에 매칭 완료 화면으로 넘어가는 기능을 구현해 보았다

그런데 매칭 중 모달에서 취소 버튼을 누르면 매칭을 취소 시키고, 매칭 완료 화면으로 넘어가지 않게 해야 했어서 그 부분 구현한 것을 기록해 보겠다

const [modalVisible, setModalVisible] = useState(false);
const timeRef = useRef(null);

const startMatching = () => {
    setModalVisible(true);
    timeRef.current = setTimeout(() => {
        setModalVisible(false);
        navigation.navigate('Done');
    }, 2000);
}

const stopMatching = () => {
    clearTimeout(timeRef.current);
}

우선 setTimeout 함수로 실행시킬 내용과 시간 지연(단위: 밀리초)를 지정해 줄 수 있다

그러나 이 때 도중에 취소 버튼을 누르면 실행 중이던 setTimeout의 타이머가 멈춰야 했는데, 그래서 useRef Hook을 사용해 주었다

 

useRef(초기값)은 상태 관리가 필요하지만 상태 변경으로 인한 재랜더링을 막아야 할 때 이용한다

초기값은 .current에 할당된다

 

이를 이용해 timeRef.current에 setTimeout 함수를 할당해 주고, 만일 취소 버튼을 눌렀을 경우 stopMatching 함수를 실행시켜 clearTimeout 함수를 통해 실행 중이던 타이머를 취소시켜 주었다