RN(ReactNative) TDD TODO 앱 디버깅하기

2022.08.12 - [IT/React] - RN(ReactNative) TDD TODO 앱 만들기 #8

RN(ReactNative) TDD TODO 앱 만들기 #8

디버깅 설정 - 컴포넌트가 반복적으로 렌더링 되는 것 확인

이전에 만들어 둔 앱을 디버깅 하려고 합니다

성능 개선을 위해서는 먼저 성능이 어떤지 측정합니다

테스트 케이스

'Build a React Native app' 을 추가 합니다

레코딩 된 profiler 결과

Profiler 를 보면 뭔가를 할 때마다 랜더링이 계속 일어나고 있는 것을 색상으로 알 수 있습니다

개선방향

React.memo 를 적용해서 랜더링이 필요할 때만 일어나게 해주고

useCallback 을 적용해서 함수를 재활용 할 수 있게 변경해줍니다

 

그리고 동일하게 'Build a React Native app' 을 추가 하는 행동을 하면서 recoding 해주고 결과를 보면

개선 후 profile 눈에 띄게 회색이 많아졌다

 

React 랑 틀리게 랜더링 되는걸 눈으로 확인하지 못하고 있는데

그나마 profiler 로 레코딩 해서 결과치를 비교할 수 있으니 다행이다

 

이후에는 Task 삭제시에 TaskInput 이 랜더링되는 것을 막는다

Task 를 삭제 하는 것을 recoding 하고 

개선 후에 다시 동일한 행위를 반복하면서 recoding 하면

 

TaskInput 랜더링 개선

삭제 할 때 TaskInput 이 랜더링 되지 않게 회색으로 변한 것을 확인 할 수 있다

 

소스공유

https://github.com/skyksit/react-native-todo-app-tdd/tree/v0.9

GitHub - skyksit/react-native-todo-app-tdd