요즘 rn 앱 내에서의 ui re-rendering을 막으면서 최적화를 위해 힘쓰고 있다.
여러 방법들을 공부하면서 기록하고자 한다. 📚
프로파일링 하며 시도했던 방법들은 추후에 더 기록할 예정이다 🔥
1. 과도한 커스텀 hook 사용 방지
첫 번째로 우리 앱에는 hook이 정말 많았다.
종속성이 변경되면서 필요하지 않는 화면까지 re-rendering 되는 상황이었다.
최적화를 해보자
- 과도한 hook 사용을 방지하고 필요한 화면. 즉, 해당 컴포넌트 안에서만 hook을 사용하는 방식이다.
예를 들어 하나의 화면 안에 2가지 컴포넌트로 분리되어 있다고 치자.
기존에는 presentational and container 패턴을 사용하면서 1과 2 화면에서 필요한 정보들을 모두 1+2 <전체> 화면에서 갖고 있었다.
그렇다보니 props drilling이 많이 일어나 사용자 경험이 안좋아졌다.
필요한 화면에서만 hook을 사용해야겠구나!
해당 화면에서만 hook을 사용하도록 리팩토링하기 시작했다.
문제점
1. 1+2 <전체> 화면에서 화면 1에서만 사용되는 hook이 필요하다.
2. 과연 해당 hook이 전체 화면에서도 필요한 걸까?
단, 해당 커스텀 hook이 전체 화면에서는 불필요한 정보들이 많을 때를 기준으로 작성되었다.
해결법
필요한 정보들만 빼오자!
각각 화면에서 hook을 사용하되 컴포넌트를 그릴 때 필요한 정보만 전역으로 관리하자!
전역으로 저장된 정보를 가지고 1+2 <전체> 화면에서 사용하면 되는 것이다 !!!