[React Native] 단어장 → 카테고리 이동 시 성능 개선

[coldrain-f]

Description

단어장을 클릭하면 카테고리로 넘어갈 때 없던 딜레이가 생기기 시작했다. 원인을 찾아서 성능 개선하기

단어장 아이템 클릭 시 아이템이 꾹 눌린 상태가 0.3초 가량 지속된 후 카테고리로 화면으로 넘어간다. 기존에는 누르면 딜레이 없이 바로 넘어갔었고 데이터 수가 몇 개 안되는데 딜레이가 생기기 때문에 문제 해결 필요

Works

• [x] 문제점 발견 후 성능 개선하기

[coldrain-f]

데이터 수도 매우 적은데 넘어갈 때마다 버벅거리는 것 같아서 원인을 찾아봤다.

navigation.navigate("Category", {
    book: item,
    categories: categories // 문제 코드
}

찾아보니 카테고리 화면으로 넘어간 후 book.id로 categories를 조회해야 하는데 단어장 화면에서 categories를 미리 조회 후 카테고리 컴포넌트에게 넘기도록 해서 그런 것 같다. 부모에서 미리 데이터 불러오고 자식에게 넘겨주나 자식에서 데이터 불러오나 성능 면에서 왜 차이가 나는지 모르겠다.

로직은 문제가 맞았지만 성능 면에서 왜 문제가 되나 싶긴 한데, 어쨌든 고치고 난 후 딜레이가 깔끔하게 사라졌다.

[coldrain-f]

자식 컴포넌트에게 최대한 불필요한 Prop을 넘겨주지 않도록 신경 써야겠다. 지금까지 React Navigation의 useNavigation() Hook을 몰라서 내비게이션 함수 호출도 직접 할 수 있는데 인자를 넘겨주도록 코드를 작성하고 있었다.

여기까지 진행하고 나니 체감상 0.3초 정도 딜레이가 있었지만 0초(딜레이가 거의 없음)로 줄인 것 같다. 컴포넌트 본인의 상태는 가능한 한 넘겨 받지 말고, 본인이 직접 갖고 있도록 작성하자