20:I[536515,["/_next/static/immutable/chunks/1l88qfqr214lg.js","/_next/static/immutable/chunks/140lucvgzny1t.js","/_next/static/immutable/chunks/0h72irdf5jbkp.js","/_next/static/immutable/chunks/0uomrwa0d9fep.js","/_next/static/immutable/chunks/1_6tb_46uudug.js","/_next/static/immutable/chunks/1hk1clakksktf.js","/_next/static/immutable/chunks/0tos9h9-naode.js","/_next/static/immutable/chunks/304dqzeb6b0bn.js","/_next/static/immutable/chunks/1g-elbz1od49w.js","/_next/static/immutable/chunks/0u4n3l2vaan_d.js","/_next/static/immutable/chunks/3egm3pk02913o.js","/_next/static/immutable/chunks/2fwgykkvpr8o7.js","/_next/static/immutable/chunks/0zdgidr3ia25h.js","/_next/static/immutable/chunks/3jzx7fql_a9f-.js","/_next/static/immutable/chunks/3zcg661ahxixb.js"],"PostViewTracker"] 21:I[207142,["/_next/static/immutable/chunks/1l88qfqr214lg.js","/_next/static/immutable/chunks/140lucvgzny1t.js","/_next/static/immutable/chunks/0h72irdf5jbkp.js","/_next/static/immutable/chunks/0uomrwa0d9fep.js","/_next/static/immutable/chunks/1_6tb_46uudug.js","/_next/static/immutable/chunks/1hk1clakksktf.js","/_next/static/immutable/chunks/0tos9h9-naode.js","/_next/static/immutable/chunks/304dqzeb6b0bn.js","/_next/static/immutable/chunks/1g-elbz1od49w.js","/_next/static/immutable/chunks/0u4n3l2vaan_d.js","/_next/static/immutable/chunks/3egm3pk02913o.js","/_next/static/immutable/chunks/2fwgykkvpr8o7.js","/_next/static/immutable/chunks/0zdgidr3ia25h.js","/_next/static/immutable/chunks/3jzx7fql_a9f-.js","/_next/static/immutable/chunks/3zcg661ahxixb.js"],"PostBackButton"] 22:I[390236,["/_next/static/immutable/chunks/1l88qfqr214lg.js","/_next/static/immutable/chunks/140lucvgzny1t.js","/_next/static/immutable/chunks/0h72irdf5jbkp.js","/_next/static/immutable/chunks/0uomrwa0d9fep.js","/_next/static/immutable/chunks/1_6tb_46uudug.js","/_next/static/immutable/chunks/1hk1clakksktf.js","/_next/static/immutable/chunks/0tos9h9-naode.js","/_next/static/immutable/chunks/304dqzeb6b0bn.js","/_next/static/immutable/chunks/1g-elbz1od49w.js","/_next/static/immutable/chunks/0u4n3l2vaan_d.js","/_next/static/immutable/chunks/3egm3pk02913o.js","/_next/static/immutable/chunks/2fwgykkvpr8o7.js","/_next/static/immutable/chunks/0zdgidr3ia25h.js","/_next/static/immutable/chunks/3jzx7fql_a9f-.js","/_next/static/immutable/chunks/3zcg661ahxixb.js"],"PostSummary"] 1f:T69a,{"@context":"https://schema.org","@type":"BlogPosting","headline":"테이블 컴포넌트 리팩토링: 레거시에서 새 구조로 옮겨가기","description":"프로젝트 배경예전 프로젝트에서는 Table.tsx라는 거대한 테이블 컴포넌트를 쓰고 있었습니다. 1,000줄이 넘는 코드에, props만 50개가 넘다 보니 새로운 기능을 추가하거나 버그를 수정할 때마다 손대기가 두려울 정도였죠.이번에 아예 새로운 패키지(packages/table)로...","image":["https://3d-blog.vercel.app/blog/category/회사/post/%ED%85%8C%EC%9D%B4%EB%B8%94-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EB%A6%AC%ED%8C%A9%ED%86%A0%EB%A7%81-%EB%A0%88%EA%B1%B0%EC%8B%9C%EC%97%90%EC%84%9C-%EC%83%88-%EA%B5%AC%EC%A1%B0%EB%A1%9C-%EC%98%AE%EA%B2%A8%EA%B0%80%EA%B8%B0/opengraph-image"],"author":{"@type":"Person","name":"성창수"},"publisher":{"@type":"Organization","name":"3D Blog","logo":{"@type":"ImageObject","url":"https://3d-blog.vercel.app/opengraph-image"}},"datePublished":"2025-09-11T13:26:43.630Z","dateModified":"2026-08-17T08:22:33.377Z","mainEntityOfPage":{"@type":"WebPage","@id":"https://3d-blog.vercel.app/blog/category/회사/post/%ED%85%8C%EC%9D%B4%EB%B8%94-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EB%A6%AC%ED%8C%A9%ED%86%A0%EB%A7%81-%EB%A0%88%EA%B1%B0%EC%8B%9C%EC%97%90%EC%84%9C-%EC%83%88-%EA%B5%AC%EC%A1%B0%EB%A1%9C-%EC%98%AE%EA%B2%A8%EA%B0%80%EA%B8%B0"},"url":"https://3d-blog.vercel.app/blog/category/회사/post/%ED%85%8C%EC%9D%B4%EB%B8%94-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EB%A6%AC%ED%8C%A9%ED%86%A0%EB%A7%81-%EB%A0%88%EA%B1%B0%EC%8B%9C%EC%97%90%EC%84%9C-%EC%83%88-%EA%B5%AC%EC%A1%B0%EB%A1%9C-%EC%98%AE%EA%B2%A8%EA%B0%80%EA%B8%B0"}23:T1bb3,

프로젝트 배경

예전 프로젝트에서는 Table.tsx라는 거대한 테이블 컴포넌트를 쓰고 있었습니다. 1,000줄이 넘는 코드에, props만 50개가 넘다 보니 새로운 기능을 추가하거나 버그를 수정할 때마다 손대기가 두려울 정도였죠.

이번에 아예 새로운 패키지(packages/table)로 분리해서 구조를 처음부터 다시 설계했고, 결과적으로 훨씬 쓰기 편하고 유지보수하기 좋은 테이블 컴포넌트를 만들 수 있었습니다.

무엇이 달라졌나?

1. 구조적인 변화

기존 테이블

하나의 파일 안에 모든 기능이 다 들어있음 (약 1,100줄)
props만 50개 이상 → 어떤 게 어디서 쓰이는지 매번 헷갈림
상태 관리도 React Table v7의 훅을 직접 조합해야 해서 복잡

새 테이블

컴파운드 컴포넌트 패턴(Compound Component Pattern) 으로 전환
→ Table, TableMain, TableToolbar, TablePagination 같은 컴포넌트를 필요한 대로 조합해서 사용
TableProvider를 중심으로 상태를 공유해 코드가 깔끔해짐
각 컴포넌트가 자기 역할에 필요한 props만 받아서 헷갈릴 일이 없음

2. 라이브러리 업그레이드

예전: React Table v7
지금: TanStack Table v8

덕분에 코드가 훨씬 단순해졌습니다.

// 예전 (복잡)
const { getTableProps, headerGroups, prepareRow, page } = useTable(
  { columns, data },
  useFilters,
  useGlobalFilter,
  useSortBy,
  usePagination
);

// 지금 (심플)
const table = useReactTable({
  data,
  columns,
});

사용성 개선

1. props 지옥 탈출

이전 방식

<Table
  data={data}
  columns={columns}
  isSearch
  searchColumnId="name"
  isPagination
  manualPagination
  onClickRow={handleRowClick}
  // ... 20개 넘는 props
/>

지금 방식

<Table data={data} columns={columns} onClickRow={handleRowClick}>
  <TableToolbar>
    {({ onSearch }) => <SearchInput onSearch={onSearch} />}
  </TableToolbar>
  <TableMain useVirtualization />
  <TablePagination total={1000} />
</Table>

검색 관련 props는 TableToolbar 안에서만 처리
페이지네이션 관련 props는 TablePagination에서만 관리
테이블 본체(data, columns)는 Table에만 전달

👉 덕분에 props를 외울 필요도 없고, 필요한 곳에서만 다루니 헷갈릴 일이 없습니다.

2. 필요한 기능만 조합

// 간단하게
<Table data={data} columns={columns}>
  <TableMain useVirtualization />
  <TablePagination total={1000} />
</Table>

// 복잡하게도 가능
<Table data={data} columns={columns}>
  <TableToolbar>
    {({ onSearch }) => <CustomSearch onSearch={onSearch} />}
  </TableToolbar>
  <TableFilterBar />
  <TableMain fixedColumns={[{ index: 0, position: 'left' }]} />
  <TablePagination total={1000} />
</Table>

이제는 불필요한 기능을 끼워 넣지 않아도 되고, 필요한 것만 골라서 조합할 수 있습니다.

성과

props 개수 감소
개발자들이 사용하기 쉬워짐

결과적으로 코드 읽기가 훨씬 쉬워졌고, 새로운 기능을 추가하거나 버그를 고치는 속도도 크게 빨라졌습니다.

배운 점

리팩토링하면서 크게 느낀 건 두 가지였습니다.

컴파운드 컴포넌트 패턴의 힘
→ props로 기능을 제어하는 방식보다, 필요한 컴포넌트를 조합하는 방식이 훨씬 직관적이고 확장성도 좋습니다.
props는 필요한 곳에서만
→ 모든 옵션을 한 컴포넌트에 몰아넣는 대신, 각 기능이 자기 자리에서만 props를 받게 하면 코드가 깔끔해지고 혼동이 줄어듭니다.

마무리

이번 테이블 리팩토링은 단순히 코드를 줄이는 작업이 아니라, “어떻게 하면 더 쓰기 편하고 유지보수하기 좋은 구조를 만들 수 있을까” 를 고민한 과정이었습니다.

앞으로도 이런 방식으로 다른 레거시 컴포넌트들도 하나씩 개선해 나갈 계획입니다.

17:[["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"$1f"}}],["$","$19",null,{"fallback":null,"children":["$","$L20",null,{"postId":8,"slug":"테이블-컴포넌트-리팩토링-레거시에서-새-구조로-옮겨가기","categorySlug":"회사"}]}],["$","div",null,{"className":"mx-4 max-w-4xl lg:mx-auto","children":[["$","$L21",null,{"href":"/blog/category/회사"}],["$","section",null,{"className":"relative mb-12 mt-0 px-4 py-8 sm:px-6 md:rounded-2xl md:px-8 md:overflow-hidden md:border md:border-[#ff9a3c]/20 md:bg-gradient-to-br md:from-[#2a1545]/90 md:via-[#1c0e38]/85 md:to-[#12082a]/80 md:shadow-[0_0_32px_rgba(255,154,60,0.1)] dark:md:border-[#3de8ff]/[0.15] dark:md:from-[#0a0618]/90 dark:md:via-[#070414]/90 dark:md:to-[#000008]/85 dark:md:shadow-[0_0_32px_rgba(61,232,255,0.08)]","children":[["$","div",null,{"className":"pointer-events-none absolute inset-0 z-0 hidden md:block","children":["$","div",null,{"className":"h-full w-full bg-gradient-to-tr from-[#8a4a68]/15 via-[#1c0e38]/20 to-[#ffc090]/10 blur-[2px] dark:from-cyan-900/20 dark:via-fuchsia-900/10 dark:to-cyan-800/10"}]}],["$","h1",null,{"className":"relative z-10 mb-4 text-3xl font-extrabold md:drop-shadow-sm dark:md:drop-shadow-[0_2px_8px_#7dd3fc55] text-[#ffe8d0] dark:text-[#c8e8ff]","children":"테이블 컴포넌트 리팩토링: 레거시에서 새 구조로 옮겨가기"}],["$","div",null,{"className":"relative z-10 mb-6 flex items-center gap-3 text-xs text-[#d4a8c0]/85 dark:text-[#7ec8ff]/75","children":[["$","span",null,{"className":"font-mono","children":"성창수"}],["$","span",null,{"className":"opacity-60","children":"|"}],["$","span",null,{"children":"2025-09-11"}],[["$","span",null,{"className":"opacity-60","children":"|"}],["$","span",null,{"className":"text-[#ffb870] dark:text-[#3de8ff]","children":"회사"}]]]}],false,["$","div",null,{"className":"relative z-10 mb-2 min-h-[88px] p-2","children":["$","$19",null,{"fallback":["$","div",null,{"className":"mb-6 min-h-[88px]","aria-hidden":true}],"children":[["$","$L4",null,{"moduleIds":["3623811150574836874"]}],["$","$L22",null,{"post":{"id":8,"title":"테이블 컴포넌트 리팩토링: 레거시에서 새 구조로 옮겨가기","content":"$23","updatedAt":"$D2026-08-17T08:22:33.377Z"}}]]}]}],"$L24"]}],"$L25"]}]] 1a:null 1e:[["$","title","0",{"children":"테이블 컴포넌트 리팩토링: 레거시에서 새 구조로 옮겨가기"}],["$","meta","1",{"name":"description","content":"프로젝트 배경예전 프로젝트에서는 Table.tsx라는 거대한 테이블 컴포넌트를 쓰고 있었습니다. 1,000줄이 넘는 코드에, props만 50개가 넘다 보니 새로운 기능을 추가하거나 버그를 수정할 때마다 손대기가 두려울 정도였죠.이번에 아예 새로운 패키지(packages/table)로..."}],["$","meta","2",{"name":"author","content":"성창수"}],["$","meta","3",{"name":"creator","content":"3D Blog"}],["$","meta","4",{"name":"publisher","content":"3D Blog"}],["$","meta","5",{"name":"robots","content":"index, follow"}],["$","meta","6",{"name":"googlebot","content":"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1"}],["$","link","7",{"rel":"canonical","href":"https://3d-blog.vercel.app/blog/category/%ED%9A%8C%EC%82%AC/post/%ED%85%8C%EC%9D%B4%EB%B8%94-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EB%A6%AC%ED%8C%A9%ED%86%A0%EB%A7%81-%EB%A0%88%EA%B1%B0%EC%8B%9C%EC%97%90%EC%84%9C-%EC%83%88-%EA%B5%AC%EC%A1%B0%EB%A1%9C-%EC%98%AE%EA%B2%A8%EA%B0%80%EA%B8%B0"}],["$","meta","8",{"name":"google-site-verification","content":"txYmXq1GLSvBcoTz6-zWwFTe4Wl0bmJ1DYYi97AnAB0"}],["$","meta","9",{"property":"og:title","content":"테이블 컴포넌트 리팩토링: 레거시에서 새 구조로 옮겨가기"}],["$","meta","10",{"property":"og:description","content":"프로젝트 배경예전 프로젝트에서는 Table.tsx라는 거대한 테이블 컴포넌트를 쓰고 있었습니다. 1,000줄이 넘는 코드에, props만 50개가 넘다 보니 새로운 기능을 추가하거나 버그를 수정할 때마다 손대기가 두려울 정도였죠.이번에 아예 새로운 패키지(packages/table)로..."}],["$","meta","11",{"property":"og:url","content":"https://3d-blog.vercel.app/blog/category/%ED%9A%8C%EC%82%AC/post/%ED%85%8C%EC%9D%B4%EB%B8%94-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EB%A6%AC%ED%8C%A9%ED%86%A0%EB%A7%81-%EB%A0%88%EA%B1%B0%EC%8B%9C%EC%97%90%EC%84%9C-%EC%83%88-%EA%B5%AC%EC%A1%B0%EB%A1%9C-%EC%98%AE%EA%B2%A8%EA%B0%80%EA%B8%B0"}],["$","meta","12",{"property":"og:site_name","content":"3D Blog"}],["$","meta","13",{"property":"og:locale","content":"ko_KR"}],["$","meta","14",{"property":"og:image","content":"https://3d-blog.vercel.app/blog/category/%ED%9A%8C%EC%82%AC/post/%ED%85%8C%EC%9D%B4%EB%B8%94-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EB%A6%AC%ED%8C%A9%ED%86%A0%EB%A7%81-%EB%A0%88%EA%B1%B0%EC%8B%9C%EC%97%90%EC%84%9C-%EC%83%88-%EA%B5%AC%EC%A1%B0%EB%A1%9C-%EC%98%AE%EA%B2%A8%EA%B0%80%EA%B8%B0/opengraph-image-10g31z?ff75c0294565acbf"}],["$","meta","15",{"property":"og:image:type","content":"image/png"}],["$","meta","16",{"property":"og:image:width","content":"1200"}],["$","meta","17",{"property":"og:image:height","content":"630"}],["$","meta","18",{"property":"og:image:alt","content":"3D Blog Post"}],["$","meta","19",{"property":"og:type","content":"article"}],["$","meta","20",{"property":"article:published_time","content":"2025-09-11T13:26:43.630Z"}],["$","meta","21",{"property":"article:modified_time","content":"2026-08-17T08:22:33.377Z"}],["$","meta","22",{"property":"article:author","content":"성창수"}],["$","meta","23",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","24",{"name":"twitter:creator","content":"성창수"}],["$","meta","25",{"name":"twitter:title","content":"테이블 컴포넌트 리팩토링: 레거시에서 새 구조로 옮겨가기"}],["$","meta","26",{"name":"twitter:description","content":"프로젝트 배경예전 프로젝트에서는 Table.tsx라는 거대한 테이블 컴포넌트를 쓰고 있었습니다. 1,000줄이 넘는 코드에, props만 50개가 넘다 보니 새로운 기능을 추가하거나 버그를 수정할 때마다 손대기가 두려울 정도였죠.이번에 아예 새로운 패키지(packages/table)로..."}],["$","meta","27",{"name":"twitter:image","content":"https://3d-blog.vercel.app/blog/category/%ED%9A%8C%EC%82%AC/post/%ED%85%8C%EC%9D%B4%EB%B8%94-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EB%A6%AC%ED%8C%A9%ED%86%A0%EB%A7%81-%EB%A0%88%EA%B1%B0%EC%8B%9C%EC%97%90%EC%84%9C-%EC%83%88-%EA%B5%AC%EC%A1%B0%EB%A1%9C-%EC%98%AE%EA%B2%A8%EA%B0%80%EA%B8%B0/opengraph-image-10g31z?ff75c0294565acbf"}],["$","meta","28",{"name":"twitter:image:alt","content":"3D Blog Post"}],["$","meta","29",{"name":"twitter:image:type","content":"image/png"}],["$","meta","30",{"name":"twitter:image:width","content":"1200"}],"$L26","$L27","$L28"]

테이블 컴포넌트 리팩토링: 레거시에서 새 구조로 옮겨가기

댓글