codestates / codestates/BanThing

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

Open
#208 0 comments 0 reactions 1 assignee Claimed by @tmdqls2257 View on GitHub
client error solved
Dominant language
TypeScript
Stars
0
Forks
2
PR merge metrics
No merged PRs in 30d

Description

### 어떤 에러인가요?
![image](https://user-images.githubusercontent.com/54207332/155964347-61046132-8de0-4b37-a453-fc3344587a72.png)
- 기존의 자바스크립트 같은 경우 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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.