리액트 개발중 렌더링 관련 문의하나 하고 싶습니

React
1

파이어베이스로부터 약 1500개의 row를 불러와 테이블에 보여주는 작업을 진행 중입니다.

그런데 렌더링이 지나치게 빈번히 발생합니다. 또한 내용이 화면에 나오기까지 5초~7초 너무 오래 걸립니다.

질문 드리겠습니다.

테이블 내 각각의 항목에 고유한 링크가 걸려있어서 다른 페이지로의 이동이 많은데,

개발 페이지(localhost:3000)를 벗어났다가 뒤로가기등을 통해 다시 접속을 하게 되면 5초~7초동안 다시 불러옵니다.

그러다보니 너무 딜레이가 심해지는데, 이것을 방지하는 방법이 없을까요?

어디 캐시같은데 저장한다거나… 데이터 변화가 없으면 렌더링을 하지 않도록 하는 그런 방법 말입니다.

리액트 시작한지 1달만에 홈페이지 개발하니 어려움이 많네요- 고수님들 답변 부탁드립니다.

감사합니다.

2

구현하신 코드를 공유해주시면 다른 분들이 문제를 발견하는데 도움이 됩니다.

3

브라우저에서 복잡한 모델의 캐시는 IndexedDB 등에 저장이 가능하지만 이건 정확하게 이해하고 꼭 필요한 곳에서만 써야 합니다.

코드를 보지 않아 추측으로만 말씀드리면, 1500개를 한번에 가져와서 한번에 뿌리시는것이 문제가 아닐까 합니다.
화면에 필요한 갯수만큼만 가져와서 뿌리고, 추가로 필요한것을 가져와야하죠.
네트워크에서 가져오는데 얼마나 걸리는지, 실제로 js 연산에 드는 시간은 얼마인지, 브라우저에 뿌려지는데 드는 시간은 얼마인지 하나씩 측정해보세요.
짐작컨데 리액트 한달하신 것의 문제가 아니라 기본기의 문제인것 같습니다.

그리고 코드를 올리셔야 문제를 도와드릴 수 있습니다.

4

https://github.com/jsdevkr/datagrid 이 라이브러리를 사용해서 출력 테스트를 해보세요.

1개의 좋아요