 - Zustand Store와 React.memo로 리렌더링 최소화/index.png)
react native2026.03.22
React Native 칸반보드 드래그 앤 드롭 성능 최적화 (3) - Zustand Store와 React.memo로 리렌더링 최소화
2편의 개선에도 불구하고 남아있는 30-46ms짜리 큰 리렌더링의 원인은 props drilling이었습니다. Zustand store로 draggingItem 상태를 분리하고, React.memo와 세밀한 selector로 전체 트리 리렌더링을 차단합니다.
Tags
Allreactnextjstypescriptreact-querycacheperformancecodematesetQueryDatainvalidateQuerieswebsocketrealtimecommentsserver-componentspromise-alloptimizationreact native드래그 앤 드롭성능 최적화ZustandReact.memoselector칸반보드props drillingPanResponderuseMemouseRefuseNativeDriver리렌더링자동 스크롤requestAnimationFramePortalContext APIAnimatedhooks트러블슈팅google mapexpo-location졸업작품JavaScriptdeepdiveuseStatehooknext.jsSSRSuspense렌더링테스트dev toolsSSGAlgorithm프로그래머스PCCPlv2이분탐색클로저생명주기Virtual DOM백준golddfslv3bfs
성능 최적화.
3 articles
 - PanResponder 안정화와 Native 애니메이션/index.png)
react native2026.03.09
React Native 칸반보드 드래그 앤 드롭 성능 최적화 (2) - PanResponder 안정화와 Native 애니메이션
1편에서 측정한 문제들 중 즉각적인 효과가 있는 것부터 개선합니다. PanResponder를 useMemo로 안정화하고, 애니메이션을 Native 스레드로 전환합니다. 그리고 실제 측정 결과를 봅니다.
 - 문제 인식과 측정/index.png)
react native2026.02.23
React Native 칸반보드 드래그 앤 드롭 성능 최적화 (1) - 문제 인식과 측정
칸반보드 드래그 앤 드롭에서 드래그 중에 불필요한 리렌더링 및 버벅임이 발생하는 문제를 수치로 측정하고 원인을 분석합니다.