인프런 커뮤니티 질문&답변
작성한 질문수
안녕하세요 navigation.push 성능에 대해 질문드립니다
해결된 질문
작성
·
553
1
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요!
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 잠깐! 인프런 서비스 운영 관련 문의는 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 의 데이터가 아예 없어서, 텅 빈화면이 있었습니다.
답변 1
1
제로초(조현영)
지식공유자
이건 당연히 트레이드오프일 수밖에 없습니다. 기존 화면들 위에 다른 화면을 쌓으면 컴포넌트 수가 계속 늘어나니 어쩔수가 없죠. navigate를 하면 성능은 좋지만 한 페이지 내에서 바꾸는 것이니 이전 페이지로 갈 때 이상해지고요.
말씀하신대로 push 후에 뭔가 비교를 해서 리렌더링을 안 하도록 작성하셨으면 끝까지 그 방식으로 하시면 되는 것 아닌가요? 이전 데이터들도 전부 페이지별로 리덕스에 저장해놓으면 되지 않나요?
useIsFocused 훅도 괜찮은 것 같습니다. 포커스가 풀린 페이지는 아무것도 렌더링하지 않게끔요.
답변 감사합니다
useIsFocused 훅과'전부 페이지별로 리덕스에 저장'하는 방법을 전부 테스트 해 보았습니다
현재 제 앱에 맞는 후자의 방식으로 결정했습니다 도움 주셔서 감사합니다 ㅎㅎㅎ
추가로 질문을 드리면,
navigate와 push의 차이점에서 더 나아가, 각각의 성능이슈들은 닥스를 통해서가 아니라, 실제 개발을 하면서 부닥쳐가야지만 알 수 있는 것들인가요?
이번 이슈를 계기로, react navigation 성능적인 부분이 궁금해서, bottom tab과 top tab 에 대해서도 각각 콘솔을 찍어서 '유저가 보고 있는 스크린'이 아닌, 다른 스크린도 렌더링 되는지를 체크 했습니다
유저가 보고있는 스크린이 아닌 다른 스크린에서도 렌더링이 일어나는 걸 알 수 있었는데요.
이러한 부분을 보면서, '왜 닥스를 읽었는데, 저런 부분을 알지 못했을까' 하는 생각이 들었습니다.
조현영님의 답변을 보고 닥스를 다시 읽어봤는데, navigation.push와 navigation.navigate의 차이에 대해서는 나와있지만, 각 케이스별로 이러이러한 성능이슈가 있을 수 있다~( 또한, bottom tab과 top tab에 대해서도 마찬가지였습니다 ), 등의 내용을 발견하지를 못했씁니다. 그저 문서에 나와있는 그대로를 받아들였습니다
레딧에서 저와 비슷한 이슈를 겪은 글을 봤는데, 거기서 어떤 유저는 push가 아니라 navigate를 주로 쓴다고 하더라구요. push 를 쓰면 저와 같은 이슈를 겪을 수밖에 없다고..
하지만, push는 그대로 살려둔 채, 조현영님의 답변을 참고해서 제 문제를 해결한 걸 보면, 어떤 쪽을 선택해야하는지에 대해서 필요한 조건은, '자기가 직접 부딫친 경험' 뿐인가 하는 생각도 들었습니다.