post/react-router-deep-dive-2/

[giscus[bot]]

post/react-router-deep-dive-2/

react-router의 선언적 모드의 동작 방식을 살펴봅니다.

https://developer-bandi.github.io/post/react-router-deep-dive-2/

[nowrobin]

언제쯤 딥다이브 해서 학습해보고 싶었던 주제였는데, 너무 잘 정리해주신것 같아요. 이렇게 딥 다이브하면서 학습하면 확실히 예기치 못한 에러가 발생했을때, 원인을 찾는데 도움이 많이 되는것 같아요! 좋은 글 잘읽었습니다 !

[KimDanwoo]

결국 브라우저 네이티브 pushState/replaceState + popstate 이벤트를 래핑해서 리액트 상태로 연결한 거네요.
useLayoutEffect로 동기적으로 구독하는 것도 렌더링 타이밍상 중요한 선택인 것 같고요. 생각보다 심플한 구조라 놀랐습니다.

[S-jooyoung]

startTransition으로 setState를 래핑하는 이유를 설명해주신 부분이 좋네요. 사용자 경험을 고려한 우선순위 조정까지 생각해서 구현된 거였군요.

history.listen(setState)로 구독하는 방식과 popState 이벤트 처리하는 부분을 보면서, 브라우저 히스토리 API와 React의 상태 관리가 어떻게 연결되는지 명확하게 이해할 수 있었습니다.

[KimMyeongSu]

startTransition으로 setState를 감싸는 이유가 페이지 이동 시 렌더링 우선순위를 낮춰서 사용자 입력을 블록하지 않으려는것이였군요, 몰랐던 내용이라 재미있게 읽었습니다 :)

[scato3]

jsx 자체가 추상화가 되어있는 좋은 예시라 생각하는데, 내부적인 로직을 직접 다뤄주심으로써 예전에 제가 실제로 만든 리액트가 떠올라 다시 정리하는데 도움이 됐습니다. 감사합니다.