[React] 이전 페이지의 상태를 유지하는 경량 리액트 라우터

 

이전 페이지의 모든 상태(스크롤, 상태)를 유지하는 리액트 라우터이면서 동시에 경량화되어 제작된 저의 자작 패키지를 소개하도록 하겠습니다. (Nesting Router 또는 Nested Routes 기능을 기본적으로 지원합니다.)

 

 

https://quarkicons.com/

 

위 동영상에서 보셨다시피 전환 애니메이션도 쉽게 적용 가능하며 이전 상태, 즉 각 요소(DOM)마다의 고유한 스크롤도 유지하는 모습입니다.

 

다만, 원리는 DOM에서 그대로 이전 페이지의 모든 요소를 유지하지만 따로 화면에 렌더링되지는 않으므로 성능에 영향이 가지 않을 정도로 메모리 사용량이 살짝 높아질 수 있으며 추후 업데이트를 통해 특정 페이지만 관련 keepAlive 옵션 기능을 통해 DOM에서 유지되지 않아도 되는 페이지를 별도로 설정할 수 있도록 할 예정입니다. 

 

패키지 크기

 

해당 패키지를 설치하려면 터미널에 아래 명령어를 입력하세요.

npm i @web-package/react-widgets-router

 

자세한 내용은 아래 링크를 클릭하여 README.md를 참고하세요.

@web-package/react-widgets-router