0. react-modal vs useRef+useEffect

오늘은 내가 pwa로 공모전을 준비하면서 라이브러리를 쓸지, 그냥 수작업을 할지에 대해 고민하고 결과를 어떻게 내렸는지 정리해보려고 한다.

일단, 늘 나는 모달을 직접 만드는데 제법 익숙해져 있었고, 이제 조금 날?먹이 필요한 상태라 웬만해서 npm을 뒤지면서 라이브러리를 쓰려고 한다 (ㅋㅋㅋㅋ)
늘 그렇듯 개발에 많은 시간을 할애해야 하는 사람들이라면 퍼블리싱은 진짜 빠르게 진행해야 하기 때문에..

하지만 늘 그래왔지만 pwa에서는 리액트로 개발해서 폰으로 연동시키려고 하다보니 정확도가 중요하게 여겨지기 시작했다.
정확도가 받쳐주는 상황에서 둘 다 비슷하다면 라이브러리를 쓰는 게 훨씬 시간적으로나 여유롭기 때문에, 어떤 게 정확도라던지 연동이 잘 되는지 궁금해졌다.
사족이 길었다.

react-modal (라이브러리)

놀랍게도 라이브러리는 무한한 테스팅을 통해 웬만한 건 오류가 없다고 생각해야 한다.
GPT 왈 : 모달 구현과 관련된 많은 문제를 이미 해결해 놓은 상태입니다. 이 방법은 다음과 같은 장점이 있습니다:

1. 정확성: 라이브러리는 일반적으로 다양한 환경에서 테스트되어 있으며, 외부 클릭 감지와 같은 기능이 잘 작동합니다.
2. 안정성: 라이브러리는 외부 클릭 감지 외에도 모달의 애니메이션, 접근성(ARIA), 포커스 관리 등을 처리합니다.
3. 편리함: 라이브러리를 사용하면 모달의 다양한 상태와 동작을 간편하게 관리할 수 있습니다.

useRef & useEffect 조합 (수작업..)

한 마디로 커스텀이 용이하지만, pwa같이 모바일로 넘어가면 제어가 빡세진다..
GPT 왈: useRef와 useEffect를 사용하는 방법은 직접적인 제어가 가능하지만, 더 많은 코드를 작성해야 하며, 모바일 환경에서 정확성을 보장하기 위해 추가적인 고려가 필요할 수 있습니다.

1. 정확성: 모바일 브라우저에서 mousedown과 touchstart 이벤트를 함께 처리해야 할 경우, useRef와 useEffect를 사용하는 방식은 더 복잡할 수 있습니다. 이를 제대로 처리하지 않으면 클릭 감지의 정확도가 떨어질 수 있습니다.
2. 안정성: 직접 구현하는 경우 브라우저 간 호환성 문제나 모바일 특성에 따라 동작이 일관되지 않을 수 있습니다.
3. 커스터마이즈: 더 많은 제어와 커스터마이즈가 가능하지만, 직접 구현해야 하므로 더 많은 코드와 테스트가 필요합니다.

---

아 이것 참,, 어쩔 수 없이 라이브러리를 사용해야겠구만..
커스텀이라던지 이벤트 핸들링을 구체화시키려면 아래가 압도적으로 편리하지만, 그건 웹 한정이라던지 앱 한정이라던지 유동적으로 제어상태를 관리하는 Pwa에서는 조금 힘든 감이 있다는 것이다.
그럼 다시 개발하러 떠나보도록 하겠다