[react] 글자 타이핑 효과, 함수 호출 두번되는 문제ㅠㅠ

Question

안녕하세요 현재 포트폴리오 웹사이트를 만들고 있는 취준생입니다!! 가장 첫 페이지에 배열내의 문장이 타이핑되고 지워지는 애니메이션을 만들고 있는데 다음 인덱스 문장으로 넘어갈때 함수 호출이 두번되는지0번째, 2번째 문장만 출력됩니다...열심히 찾아봤는데 도저히 안돼서ㅠㅠㅠ고수님들.. 제발 도와주세요ㅠㅠㅠㅠㅠ... useEffect(() => { type(); }, []); const typedTextRef = useRef(null); const cursorRef = useRef(null); const textArray = [ "프론트엔드 개발자,", "UI/UX 개선에 집중하는,", "클린코드를 지향하는,", "커뮤니케이션이 원활한,", ]; const typingDelay = 200; const erasingDelay = 100; const newTextDelay = 2000; let textArrayIndex = 0; let charIndex = 0; const type = () => { if (charIndex < textArray[textArrayIndex].length) { if (!cursorRef?.current?.classList.contains("typing")) cursorRef?.current?.classList.add("typing"); typedTextRef!.current!.innerHTML += textArray[textArrayIndex][charIndex]; charIndex++; setTimeout(type, typingDelay); } else { cursorRef?.current?.classList.remove("typing"); setTimeout(erase, newTextDelay); } }; const erase = () => { if (charIndex > 0) { if (!cursorRef?.current?.classList.contains("typing")) cursorRef?.current?.classList.add("typing"); typedTextRef!.current!.innerHTML = textArray[textArrayIndex].substring( 0, charIndex - 1 ); charIndex--; setTimeout(erase, erasingDelay); } else { cursorRef?.current?.classList.remove("typing"); textArrayIndex = (textArrayIndex + 0.5) % textArray.length; setTimeout(type, typingDelay + 1100); } };마지막 줄에서 3번째인 textArrayIndex = (textArrayIndex + 0.5) % textArray.length;여기 부분을 + 1이 아닌 +0.5로 하니 두번씩 돌아가서 원하는대로 textArray내의 모든 문장이 나오는데 이건 좋은 해결방법이 아닌거 같아서ㅠㅠㅠ 질문 올립니다...

mapwp · Answer

https://velog.io/@dy6578ekdbs/React-useEffect-%ED%95%9C-%EB%B2%88%EB%A7%8C-%EC%8B%A4%ED%96%89%EB%90%98%EA%B2%8C-%ED%95%98%EA%B8%B0-strictModeStrict mode 한번 지워보세요

[react] 글자 타이핑 효과, 함수 호출 두번되는 문제ㅠㅠ

1개의 답변

기술 목록