React Grab: 코딩 에이전트를 3배 더 빠르게 만드는 마법

React Grab 데모

코딩 에이전트를 쓰다 보면 이런 경험이 있을 겁니다. “이 버튼 크기 좀 키워줘”라고 말했는데, 에이전트가 30초간 코드를 뒤지더니 엉뚱한 파일을 수정하죠. 정확한 위치를 알려주려고 파일 경로를 복사해서 붙여넣느라 시간을 쓰고…

React Grab은 이 문제를 우아하게 해결합니다. 화면의 UI 요소를 가리키고 ⌘C를 누르면, 해당 요소의 파일 경로, 컴포넌트 이름, 소스 코드가 클립보드에 복사됩니다. 이걸 그대로 코딩 에이전트에 붙여넣기만 하면 됩니다.

왜 필요한가?

코딩 에이전트가 프론트엔드 작업에 약한 이유는 간단합니다. 번역 과정이 너무 많습니다.

우리 머릿속: “이 버튼을 좀…”
프롬프트: “make this button bigger”
에이전트의 추론: “버튼이 어디 있지? grep 해보자…”
검색 결과: 운이 좋으면 즉시, 아니면 여러 번 시도
코드 수정
결과 확인

검색 과정은 언어 모델의 비결정성 때문에 예측이 불가능합니다. 운이 좋으면 1초, 아니면 30초가 걸릴 수도 있죠. 토큰 낭비고, 비용 낭비고, 시간 낭비입니다.

React Grab은 검색 단계를 아예 제거합니다. 파일 경로와 줄 번호가 정확히 클립보드에 있으니까요.

어떻게 작동하나?

React는 개발 모드에서 각 DOM 요소의 소스 위치(파일 경로 + 줄 번호)를 노출합니다. React Grab은 이 정보를 활용합니다.

사용자가 요소를 가리키고 ⌘C 누름
React Grab이 컴포넌트 트리를 순회
각 컴포넌트의 이름과 소스 위치 수집
읽기 쉬운 스택 형식으로 클립보드에 복사

복사된 내용은 이렇게 생겼습니다:

<a class="ml-auto inline-block text-sm" href="#">
 Forgot your password?
</a>
in LoginForm at components/login-form.tsx:46:19

이걸 Claude Code나 Cursor에 붙여넣으면, 에이전트는 검색 없이 components/login-form.tsx의 46번째 줄로 바로 이동합니다.

벤치마크: 실제로 얼마나 빠를까?

Aiden Bai가 shadcn/ui 대시보드를 기반으로 20개 테스트 케이스를 실행했습니다.

조건	평균 소요 시간
React Grab 없음	16.8초
React Grab 사용	5.8초
향상률	약 3배

성능 비교 차트

물론 모든 작업에서 3배가 나오는 건 아닙니다. 단순한 요소 찾기는 80%+ 향상되지만, 여러 파일을 건드리는 복잡한 작업은 검색이 병목이 아니라서 향상폭이 작습니다. 하지만 일상적인 UI 수정—간격 조정, 레이아웃 트윅, 사소한 시각적 변경—에는 확실히 체감됩니다.

설치와 사용법

설치는 놀라울 정도로 간단합니다. 프로젝트 루트에서:

npx -y grab@latest init

Next.js를 쓴다면 app/layout.tsx에 한 줄 추가:

{process.env.NODE_ENV === "development" && (
  <script src="https://react-grab.com/grab.js" />
)}

Vite를 쓴다면 index.html에:

<script type="module">
  if (import.meta.env.DEV) {
    import("react-grab");
  }
</script>

이제 개발 서버를 실행하고, UI 요소 위에서 ⌘C(Mac) 또는 Ctrl+C(Windows/Linux)를 누르면 됩니다.

고급 기능

플러그인 시스템

React Grab은 플러그인으로 확장할 수 있습니다. 컨텍스트 메뉴 액션, 툴바 메뉴 아이템, 라이프사이클 훅, 테마 오버라이드가 가능합니다.

useEffect(() => {
  const api = window.__REACT_GRAB__;
  if (!api) return;

  api.registerPlugin({
    name: "my-plugin",
    actions: [
      {
        id: "my-action",
        label: "My Action",
        shortcut: "M",
        onAction: (context) => {
          console.log("Action on:", context.element);
          context.hideContextMenu();
        },
      },
    ],
  });

  return () => api.unregisterPlugin("my-plugin");
}, []);

Primitives API

자신만의 요소 선택기를 만들 수 있는 저수준 API도 제공합니다. getElementContext, freeze, unfreeze, openFile 같은 프리미티브를 조합해서 커스텀 도구를 만들 수 있습니다.

주의사항

개발 모드에서만 완전히 작동합니다. React는 프로덕션 빌드에서 성능과 번들 크기 때문에 소스 위치를 제거합니다. 프로덕션에서도 작동하려면 소스 맵이 활성화되어 있어야 합니다.

하지만 개발 중에만 쓰는 도구니까, 사실 이건 큰 제약이 아닙니다.

마치며: 의도와 결과 사이의 간극 좁히기

React Grab은 코딩 에이전트 워크플로의 근본적인 문제를 해결합니다. 우리가 무엇을 원하는지(의도)와 에이전트가 어디를 수정해야 하는지(코드 위치) 사이의 간극을 좁히는 거죠.

Bret Victor의 “Inventing on Principle”에서 이야기한 것처럼, 창작 도구는 즉각적인 피드백을 제공해야 합니다. React Grab은 이 원칙을 코딩 에이전트에 적용한 사례입니다.

매일 UI를 수정하는 개발자라면, 한 번 써보세요. “이거 좀 고쳐줘”라고 말하기 전에 파일을 찾느라 30초를 기다리는 일이 얼마나 비효율적이었는지 깨닫게 될 겁니다.

🔗 관련 정보

GitHub: https://github.com/aidenybai/react-grab
공식 사이트: https://react-grab.com
소개 글: https://react-grab.com/blog/intro
작성자: Aiden Bai (@aidenybai) — Million.js 제작자