안녕하세요 navigation.push 성능에 대해 질문드립니다

Question

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요 유튜브에서 강의를 듣고 인프런으로 넘어왔습니다 좋은 강의 감사드립니다 navigation.push를 쓰면서 성능 저하를 겪고 있습니다. 1. push 를 썼을 때, 지나온 스크린들의 갯수 상관없이 성능 저하가 안 일어나게 하는 방법이 있을까요? 2. 아니면, 제가 앱 구조를 잘 못 잡은 걸까요? 아래는 제가 현재 만들고 있는 앱 구조 설명과 push를 사용했을 때 찍은 로그에 대한 내용입니다. 앱 최초 진입 시에, 홈화면이 최초로 보입니다. 거기에 있는 a컴포넌트 ( 버튼이라 생각하셔도 됩니다 ) 를 클릭하면, 상품의 상세 화면(Post-detail, Post-detail은 지도도 있고, 비메오 영상도 있습니다. )을 보여주는 스크린으로 push 를 써서 이동합니다. 위 Post-detail 스크린은, 연관 상품을 보여주기 위해, 하단부에 다시 a컴포넌트를 재사용하고 있습니다. a컴포넌트를 누르면 다시 Post-detail로 이동하는 구조입니다 navigate가 아니라, 왜 push를 썼냐면, 유저 입장에서 스크린을 이동했을 때, 이동한 모든 스크린을 기록하기 위함이었습니다. 근데, 스택이 쌓일 수록, 성능 저하가 체감될 정도로 더뎌지는 게 보였습니다. Post-detail에 ``` const refCount = useRef(0); ... console.log(refCount.current++); return ( ... ) ``` 위처럼 코드를 작성하면, 콘솔에는 1 부터 숫자가 차례대로 올라가는 것이 아니라, 진입했던 각 Post-detail의 refCount에서 출발을 하더라구요. 예를들어, 1번째 Post-detail -> refCount = 1 (1번 Post-detail에서 a 컴포넌트 눌러서 2번째 Post-detail로 이동 ) 2번째 Post-detail -> refCount = 1 그리고 1번째 Post-detail 의 refCount = 2 가 찍힙니다 push로 했던 것을 navigate로 바꿨을 경우엔, route 객체를 찍어보니, 데이터 자체가 교체되는 식으로 바뀌더라구요. 그래서 최초에 홈화면에서 a컴포넌트를 누르면 navigate를 통해 Post-detail로 진입하고, 그 후에 a 컴포넌트를 눌러도 새로운 Post-detail 스택으로 이동하는 것이 아니라, 이미 열려져 있는 Post-detail 화면에서 데이터가 교체되는 걸로 보였습니다. 제가 해결하려했던 방식을 설명드리면, 리덕스에 현재 눈으로 보고 있는 스크린의 이름과 정보 몇개를 가져다놓고, push로 이동할떄마다 리덕스에 있는 데이터와 현재 스크린의 데이터를 비교해서, 현재 눈으로 보고 있는 스크린 외에는 전부 렌더링이 안 일어나게 코드를 짰었습니다. 이러니까, 뒤로가기를 시도했을 경우, 지나온 Post-detail 의 데이터가 아예 없어서, 텅 빈화면이 있었습니다.

제로초(조현영) · Answer

이건 당연히 트레이드오프일 수밖에 없습니다. 기존 화면들 위에 다른 화면을 쌓으면 컴포넌트 수가 계속 늘어나니 어쩔수가 없죠. navigate를 하면 성능은 좋지만 한 페이지 내에서 바꾸는 것이니 이전 페이지로 갈 때 이상해지고요. 말씀하신대로 push 후에 뭔가 비교를 해서 리렌더링을 안 하도록 작성하셨으면 끝까지 그 방식으로 하시면 되는 것 아닌가요? 이전 데이터들도 전부 페이지별로 리덕스에 저장해놓으면 되지 않나요? useIsFocused 훅도 괜찮은 것 같습니다. 포커스가 풀린 페이지는 아무것도 렌더링하지 않게끔요.