반응형
2022.08.12 - [IT/React] - RN(ReactNative) TDD TODO 앱 만들기 #8
이전에 만들어 둔 앱을 디버깅 하려고 합니다
성능 개선을 위해서는 먼저 성능이 어떤지 측정합니다
테스트 케이스
'Build a React Native app' 을 추가 합니다
레코딩 된 profiler 결과
Profiler 를 보면 뭔가를 할 때마다 랜더링이 계속 일어나고 있는 것을 색상으로 알 수 있습니다
개선방향
React.memo 를 적용해서 랜더링이 필요할 때만 일어나게 해주고
useCallback 을 적용해서 함수를 재활용 할 수 있게 변경해줍니다
그리고 동일하게 'Build a React Native app' 을 추가 하는 행동을 하면서 recoding 해주고 결과를 보면
React 랑 틀리게 랜더링 되는걸 눈으로 확인하지 못하고 있는데
그나마 profiler 로 레코딩 해서 결과치를 비교할 수 있으니 다행이다
이후에는 Task 삭제시에 TaskInput 이 랜더링되는 것을 막는다
Task 를 삭제 하는 것을 recoding 하고
개선 후에 다시 동일한 행위를 반복하면서 recoding 하면
삭제 할 때 TaskInput 이 랜더링 되지 않게 회색으로 변한 것을 확인 할 수 있다
소스공유
https://github.com/skyksit/react-native-todo-app-tdd/tree/v0.9
반응형
'IT > React' 카테고리의 다른 글
React 개발환경설정 (0) | 2022.09.20 |
---|---|
React Native 4가지 팁 (0) | 2022.09.14 |
RN(ReactNative) ThemeProvider Jest 적용법 (0) | 2022.08.22 |
RN(ReactNative) SafeAreaProvider Jest 적용법 (0) | 2022.08.22 |
RN(ReactNative) 디버거 설정하기 (0) | 2022.08.16 |
RN(ReactNative) TDD TODO 앱 만들기 #8 (0) | 2022.08.12 |
RN(ReactNative) TDD TODO 앱 만들기 #7 (0) | 2022.08.12 |
RN(ReactNative) TDD TODO 앱 만들기 #6 (0) | 2022.08.12 |