2020. 6. 3. 17:43ㆍ서버 프로그래밍
버튼의 Long Press, Short Press 처리는 사실 어느 플랫폼에서나 기본적으로 필요한 기능임에도 React에서 Long Press 처리는 쓸데 없이 손이 많이 가는 듯하다. 다행히 react-longpressable을 이용하여 쉽게 처리하였으나, 이 또한 100% 만족스럽지는 않다.
재미있는 것은 react-longpressable을 이용하여 Long/Short press 처리를 했을때, Button 태그의 onClick은 Long Press후 후 해제했을때 호출해서 Long press start와 end를 구분하여 처리할 수 있다는 점이다. 물론 Short press를 했을 때에는 Button의 onClick이 호출되지 않는다.
https://www.npmjs.com/package/react-longpressable
react-longpressable
Long-press component for React that uses pointer events.
www.npmjs.com
원래는 스택오버플로우의 다음 포스팅을 참고하여 구현하려 했으나, 불필요하게 시간낭비와 시행착오를 겪게하는 통에 포기했다. 스택오버플로우 포스트가 이렇게 도움이 안되는 경우도 드문데...
https://stackoverflow.com/questions/48048957/react-long-press-event
react long press event
Is there a way to add long press event in react-web application? I have list of addresses. On long press on any address, I want to fire event to delete that address followed by a confirm box.
stackoverflow.com
겨우 Long Press를 구현하기 위해서 Hook까지 사용 해야한다는 점이 이해가 되지 않았을 뿐더러, Hook을 사용시 제약 사항도 까다로운 것도 마음에 들지 않는다.
https://ko.reactjs.org/warnings/invalid-hook-call-warning.html
Invalid Hook Call Warning – React
A JavaScript library for building user interfaces
ko.reactjs.org
TypeError dispatcher.useState is not a function when using React Hooks
I have this component: import React, { useState, useEffect } from "react"; import ReactDOM from "react-dom"; function App() { const [count, setCount] = useState(0); useEffect(() => {
stackoverflow.com