next/router query 버그 / 리액트 합성 이벤트

Tag 쿼리가 제대로 입력되지 않는 현상

next/router를 활용하던 중 query를 사용하여 포스트를 필터하는 부분에서 에러가 발생했다.

 

처음 발생한 에러는 태그를 눌렀을 때 undefined가 발생했고 결과를 확인해보니 같은 자료를 얻을 수 있었다

 

useRouter/withRouter receive undefined on query in first render

 

내가 쿼리를 가져오는 페이지는 ssg를 활용하였다. 여기서 query가 하이드레이션 이후 채워지게 되는데 채워지기전 undefined가 설정되고 하이드레이션이 끝난 이후 업데이트가 제대로 반영되지 않았던 현상이었다.

추가로 쿼리를 업데이트하는 부분에서도 오류가 겹쳤는데 처음 undefined로 설정되고 나서 해당 쿼리 항목이 제대로 등록되지 않았지만 등록된 것처럼 코드를 읽게되어 제대로 업데이트 되지 않았던 현상이 발생했다.

 

Fix/9 tag change bug by bjc1102 · Pull Request #10 · bjc1102/notion-blog

 

React 합성 이벤트(Syntheticevent)

코드를 리팩토링하면서 타입을 synthetic event로 지정해줬던게 눈에 띄어서 무슨 차이인지 알아보았다

What’s the Difference Between Synthetic React Events and JavaScript Events?

 

잘 정리한진 모르겠지만 리액트의 합성 이벤트가 기존 브라우저 이벤트를 둘러싼 래퍼이고, 거기서 어느 브라우저에서나 동일하게 처리할 수 있도록 크로스 브라우징을 고려했다는 것을 이해했다.

 

그리고 리액트의 이벤트 핸들러는 카멜 케이스이고 항상 버블링되는 반면에 기존의 브라우저 이벤트는 브라우저에 따라서 버블링이 작동하지 않는 경우도 있다는 것까지 이해했다.

 

이벤트 버블링은 특히 자주 보이는 개념이라 알아두면 좋을 것이라 생각된다.

버블링과 캡처링