[Error Handling] next.js에서 클릭시 애니메이션을 생성 방법

어떤 에러인가요?

• 기존의 자바스크립트 같은 경우 classList를 사용하여 클릭시 클래스를 변경해주면서 애니메이션을 더해주고 빼주는 방법을 사용하였다.
• 하지만 next.js에서는 module.css를 사용하여 이게 통하지 않는다.

$ 터미널의 에러 코드를 여기 넣어주세요.

에러 핸들링 방법

• useState를 사용하여 className의 상태를 조절 해주자

import styles from '../../styles/Hi.module.css'
import {useEffect, useState} from 'react';

const Hi = ({children, extraClass, navigateAway}) => {

    const [className, setClassName] = useState(styles.hi);

   useMemo(() => {
    if (slide === 'down') {
      setClassName(styles.down);
    } else if (slide === 'up') {
      setClassName(styles.up);
    }
  }, [slide]);


    return (
        <span className={className}>{children}</span>
    );
};

export default Hi;

를 주어 클릭시 상태변경 될 때마다 다른 클래스를 주어 해결하였습니다.

에러 핸들링을 위해 참고한 레퍼런스 링크

• Memory-It 의 Error Handling 예시입니다.
  링크