[BUG] 금융역량테스트 해설 언마운트 안되는 현상

[toothlessdev]

✏️ 버그 발생상황

1. 금융역량테스트 페이지에서
2. 정답을 클릭 후, 다음 버튼을 누르면
3. 해설이 늦게 언마운트 되거나 언마운트 되지 않는 현상 발생

✏️ 스크린샷

✏️ 추가 요구사항
정답선택 > 정답여부 표시 > 2초후 정답여부 사라짐 > 해설 보여줌

[seokiis]

setTimeout(() => {
                    setIsCorrect(null);
                    setIsCommentVisible(true);
                }, 2000);
                

이 부분에서 setTImeout cleanUp이 안되는 것 같은데, 다음 페이지 넘어갈 떄 cleanUp 해주면 안되나요?

[toothlessdev]

❎ 버그발생코드

        const onChooseOptions = (index: number) => {
            let selectedAnswer = "";
            if (index === 0) selectedAnswer = "O";
            else if (index === 1) selectedAnswer = "X";
            else selectedAnswer = "";s

            return () => {
                if (selectedAnswer === answer) {
                    setIsCorrect(true);
                } else {
                    setIsCorrect(false);
                }
                timeout.current = setTimeout(() => {
                    setIsCorrect(null);
                    setIsCommentVisible(true);
                }, 2000);
            };
        };

        const $options = document.querySelectorAll(`.${questionOptClassName}`);

        for (let index = 0; index < $options.length; index++) {
            $options[index].addEventListener("click", onChooseOptions(index));
        }

✅ 수정된 코드

        const onChooseOptions = (e: Event) => {
            setIsCorrect(e.target?.innerHTML === answer);
            timeout.current = setTimeout(() => {
                setIsCommentVisible(true);
            }, 2000);
        };

        const $options = document.querySelectorAll(`.${questionOptClassName}`);

        for (let index = 0; index < $options.length; index++) {
            $options[index].addEventListener("click", onChooseOptions);
        }

✏️ 버그 원인 : 자바스크립트 함수 & 이벤트리스너 클로져 및 렉시컬 스코프 문제

🔗 참고자료
https://ko.javascript.info/closure
https://poiemaweb.com/js-scope
https://poiemaweb.com/js-closure