[NextJS] onPress vs onClick 차이점

📱테스트 환경

"react": "18.2.0"
"react-dom": "18.2.0"
"typescript": "^5.1.6"

---

😢 내가 겪은 문제

NextUI 를 이용해서 디자인을 적용하고 있는데, Button 을 이용하면 해당 경고 메시지가 나온다.

NextUI - Beautiful, fast and modern React UI Library

onClick is deprecated, please use onPress

그래서 나는 경고창을 보기 싫어서 onClick 를 onPress 로 바꾸는 작업을 해줬는데 이게 문제였던 것 같다.

<Button
    size="xs"
    onPress={() => {
      router.push("/");
    }}
>

아니 이렇게 하고나니까 모바일 웹에서 자꾸 한번씩 라우터가 꼬인다.

1 -> 2 -> 3 갔다가 백키를 누르면 3 -> 2 -> 1 -> 닫기 가 되어야하는데

1 -> 2 -> 3 갔다가 백키를 누르면 3 -> 2 -> 1 -> 1 -> 닫기 또는 3 -> 2 -> 1 -> 3 -> 닫기 가 된다.

Url 이 잘못 설정됐나 싶어서 확인해봐도 문제가 없다.

그래서 일주일동안 해결을 못하다가 .. 혹시나 하는 마음에 onClick 으로 바꿨더니 해결됐다 ...

이래서 뭘 쓰더라도 알고 써야한다. 나처럼 잘 모르고 사용하면 어떤 문제가 생길지 모르기 때문인 것 같다.

onPress

• 주로 모바일 앱 개발에서 사용되는 용어. 주로 React Native와 같은 프레임워크에서 사용.
• 터치 스크린 디바이스에서 버튼, 텍스트 등과 같은 요소를 눌렀을 때 발생하는 이벤트를 가리킨다.
• 주로 탭하거나 버튼을 눌렀을 때 수행되는 동작에 사용.

onClick

• 웹 개발에서 주로 사용되는 용어. 주로 HTML과 JavaScript를 기반으로 하는 웹 페이지에서 사용.
• 웹 페이지에서 마우스로 버튼, 링크 등을 클릭할 때 발생하는 이벤트를 가리킨다.
• onClick 이벤트 역시 클릭 동작에 대한 동작을 지정하는 데 사용.

요약하면, onPress는 모바일 앱 개발에서 주로 사용되는 터치 기반 이벤트를 나타내는 용어이고, onClick은 웹 개발에서 주로 사용되는 마우스 클릭 이벤트를 나타내는 용어다.

언어나 프레임워크에 따라서 실제 사용 방식은 조금씩 다를 수 있으니 항상 언어를 쓰기 전에 찾아보자..