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

[tmdqls2257]

어떤 에러인가요?

• 기존의 자바스크립트 같은 경우 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 예시입니다.
[링크](https://stackoverflow.com/questions/68838764/css-animation-keyframe-in-nextjs-not-working)