From 48cacf0409d79b0cf09c653cfb088de9155db5c5 Mon Sep 17 00:00:00 2001 From: kjs Date: Mon, 3 Nov 2025 11:55:45 +0900 Subject: [PATCH] =?UTF-8?q?perf:=20requestAnimationFrame=EC=9C=BC=EB=A1=9C?= =?UTF-8?q?=20=EB=A6=AC=EC=82=AC=EC=9D=B4=EC=A6=88=20=EC=84=B1=EB=8A=A5=20?= =?UTF-8?q?=EC=B5=9C=EC=A0=81=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 드래그 중 과도한 리렌더링 방지 - requestAnimationFrame으로 throttling 적용 - 초당 60프레임으로 제한하여 부드러운 리사이즈 - cancelAnimationFrame으로 중복 업데이트 방지 --- .../table-list/TableListComponent.tsx | 22 +++++++++++++++---- 1 file changed, 18 insertions(+), 4 deletions(-) diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx index a341d086..18d3340c 100644 --- a/frontend/lib/registry/components/table-list/TableListComponent.tsx +++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx @@ -1067,16 +1067,30 @@ export const TableListComponent: React.FC = ({ document.body.style.userSelect = 'none'; document.body.style.cursor = 'col-resize'; + let rafId: number | null = null; + const handleMouseMove = (moveEvent: MouseEvent) => { moveEvent.preventDefault(); - const diff = moveEvent.clientX - startX; - const newWidth = Math.max(80, startWidth + diff); - console.log('드래그 중:', { diff, newWidth }); - setColumnWidths(prev => ({ ...prev, [column.columnName]: newWidth })); + + if (rafId) { + cancelAnimationFrame(rafId); + } + + rafId = requestAnimationFrame(() => { + const diff = moveEvent.clientX - startX; + const newWidth = Math.max(80, startWidth + diff); + console.log('드래그 중:', { diff, newWidth }); + setColumnWidths(prev => ({ ...prev, [column.columnName]: newWidth })); + }); }; const handleMouseUp = () => { console.log('마우스 업!'); + + if (rafId) { + cancelAnimationFrame(rafId); + } + // 텍스트 선택 복원 document.body.style.userSelect = ''; document.body.style.cursor = '';