React JS 관련해서 질문드립니다.(이주일째 고민중.._)

Question

안녕하세요 REACT JS로 개발도 하고 유지보수도 하고 있는 신입 개발자입니다. 다름이 아니라 현재 React 로 만든 프로젝트를 유지보수를해야하는데 도저히 방법이 생각이 안나고 감이 안잡혀서 글을쓰게 되었습니다. 현재 구성은 react -router를 통해서 기존 메인페이지(상품목록 등) 와 상품 상세페이지가 존재합니다. 다만, 메인페이지는 600여개의 아이템이 있으며 무한 스크롤의 방식입니다. 목표는 상품 상세페이지에 들어 갔다가 back key 이벤트시, 메인으로 돌아올때(route 이동) 랜더링이 되지 않게 하고 싶습니다. 혹시 react route로 이동시 화면을 보존하고 다른 페이지로 이동후 다시 돌아와, rendering이 일어나지 않게 할수 있나요? 현재 메인화면의 화면목록은 api 호출을 통해서 구성하고 있습니다

카시와기유키 · Answer

뒤로가기나 다른 페이지 이동 후 메인화면으로 이동 시, 처음부터 다시 렌더링하는 게 아니라 스크롤 위치를 그대로 하고 또 이어 infinite-scroll 처리하고싶은 거죠?

리엑트고수가되고시퍼요 · Answer

기존의 API 호출시 약 60개의 아이템 리스트가 랜더링되고 INFINITE SCROLL 시 1번마다 60개씩 추가됩 니다. 만약 offset이 8이라면 540여개의 item 리스트가 작성되는데 되돌아올 경우에 이 540개 리스트를 유지하면서 되돌아오고싶습니다(스크롤 포지션도 마찬가지입니다)

카시와기유키 · Answer

localStorage 에 저장해서 불러오는 방법이 있습니다.대신 기존 react 로직이 복잡해질 거예요.

리엑트고수가되고시퍼요 · Answer

localStorage 도 사용해 보았습니다만 list가 600개가 되다보니 rendering timeㅣ이 매우 오래걸립니다. 실제로 로컬저장후 상세페이지에서 메인으로 돌아갈경우 3초이상걸리는경우가 있으며 windowing 기능등을 위해서 react-window 등의 lib를 적용해보려 하였으나 지금 메인 리스트 페이지의 구조상 적용이 어렵습니다.

asdfjljf · Answer

클릭할때 페이징이나 정보를 뒤로가기할때넘기는건되려나요

리엑트고수가되고시퍼요 · Answer

그 방법도 해보았습니다. history.pushState 등에 데이터를 함께 넘긴뒤 다시 되돌리는 방법도 local에 저장하는 방법과 동일하게 list 의 양이 늘어나면 render time 자체가 늘어나 사용하기가 어렵습니다.

카시와기유키 · Answer

rendering time 이 오래 걸린다면 그런대로 로딩중이라는 걸 띄우는 것은 어떨까요.차선책이 될 것 같습니다.

React JS 관련해서 질문드립니다.(이주일째 고민중.._)

7개의 답변

Q&A 목록