대용량 객체의 상태 분리 최적화

[yoonminsang]

문제

용량이 큰 객체에서 특정 값만 자주 변경될 때, 그 값 하나 때문에 객체 전체가 재생성되면서 불필요한 리렌더링이 발생한다.

해결

자주 변경되는 값을 객체에서 분리하여 별도 상태로 관리한다.

• 큰 객체: 거의 변하지 않는 데이터
• 분리된 상태: 자주 변경되는 값 (id 기반으로 관리)

실제 적용 예시

50만개 노드의 트리 컴포넌트에서 open/close 상태만 분리 관리하여, 하나의 노드를 열고 닫을 때 전체 트리 객체가 재생성되지 않도록 최적화했다. 이전에는 버벅였지만 이후에는 버벅이지 않게 되었다. 복잡한 인터페이스가 걱정이라면 외부에 내보낼때는 두 개를 결합한 하나의 인터페이스만 내보내면 된다. 링크

배운 점

프론트에서 대규모 데이터를 다룰 때는 설계 단계에서 "무엇이 자주 바뀌는가?"를 먼저 파악하는 것이 중요하다.

[al-bur]

이 포맷 좋은데요???

저희 스쿼드에서도 몇천건~만건 테이블을 그리고 각각 체크박스의 상태를 관리해야했을때 최적화를 신경써줘야했었어요! 이후에는 tanstack/table로 가서 라이브러리가 알아서 해주긴했지만요