codestates / codestates/BanThing
[Error Handling] next.js에서 클릭시 애니메이션을 생성 방법
- Dominant language
- TypeScript
- Stars
- 0
- Forks
- 2
- PR merge metrics
- No merged PRs in 30d
Description
### 어떤 에러인가요?

- 기존의 자바스크립트 같은 경우 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 (
{children}
);
};
export default Hi;
```
를 주어 클릭시 상태변경 될 때마다 다른 클래스를 주어 해결하였습니다.
### 에러 핸들링을 위해 참고한 레퍼런스 링크
- Memory-It 의 Error Handling 예시입니다.
[링크](https://stackoverflow.com/questions/68838764/css-animation-keyframe-in-nextjs-not-working)
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.