multi line typing1 [React/Next.js] 여러 줄의 타이핑(multi line typing effect) 효과 개인 포트폴리오 프로젝트 중 구현한 문자열 배열의 여러 줄 타이핑 효과이다. 한 줄만 타이핑 하는 효과의 구현은 검색으로 매우 쉽게 찾아 볼 수 있었지만, 항상 뭔가 더 추가로 더 해보고 싶은 마음에 여러 줄을 한번에 이어서 타이핑 하도록 구현해보았다. 거기에 추가로 여러개의 문자열을 번갈아가며 타이핑하도록 구현하였다. 핵심 원리를 요약하자면, useEffect내에서 상태로 관리 중인 문자열의 인덱스를 확인하고 settimeout을 사용해서 지연 시간 후에 다음 문자를 추가해준다. 근데 의존성 배열에 갱신되는 문자를 넣어서 지연시간 후에 문자가 갱신되면 다시 랜더링 되면서 useEffect로 같은 로직이 반복되는 원리이다. 코드의 각 줄마다 상세 설명을 주석으로 남겨두었다. 위의 코드는 문자열 배열을 타.. 2023. 12. 31. 이전 1 다음
