Devlery
Blog/AI

11.1k 스타 React Doctor, AI가 쓴 React의 검진표

React Doctor는 코딩 에이전트가 만든 React 코드를 state, effect, 성능, 보안, 접근성 기준으로 다시 검사하는 새 감사 루프입니다.

11.1k 스타 React Doctor, AI가 쓴 React의 검진표
AI 요약
  • 무슨 일: react-doctor@0.2.9가 2026년 5월 27일 릴리스됐고, AI 생성 React 코드 검사용 오픈소스 도구로 빠르게 주목받고 있습니다.
    • GitHub 저장소는 확인 시점 기준 11.1k stars, MIT license, 2026년 5월 28일 당일 push 기록을 보였습니다.
  • 핵심 변화: 품질 관리는 prompt를 더 길게 쓰는 문제가 아니라, agent가 만든 diff를 deterministic scanner와 CI 표면에서 다시 보는 문제로 이동합니다.
  • 실무 영향: React Doctor는 npx, agent skill, GitHub Actions, oxlint/ESLint plugin으로 Claude Code, Codex, Cursor 뒤에 붙는 검수 루프를 제안합니다.
  • 주의점: 아직 초기 도구입니다. rule coverage, false positive, 팀별 React 관례와의 충돌은 내부 PR 몇 개에 붙여 확인해야 합니다.

코딩 에이전트의 첫 번째 약속은 속도였습니다. 컴포넌트를 만들고, 상태를 연결하고, API 호출을 붙이고, 테스트까지 한 번에 열어줍니다. 그런데 React 코드에서는 속도만으로 문제가 끝나지 않습니다. useEffect dependency가 미묘하게 빗나가고, server/client boundary가 섞이고, 접근성 속성이 빠지고, memoization이 잘못 붙고, 보안상 위험한 prop 흐름이 생깁니다. 사람도 자주 틀리는 영역인데, 에이전트는 더 빨리 더 많은 diff를 만들기 때문에 검수 병목은 오히려 커집니다.

2026년 5월 27일 최신 릴리스를 낸 React Doctor가 흥미로운 이유가 여기에 있습니다. 이 프로젝트의 README는 자신을 "agent가 나쁜 React를 쓰면 잡아내는" 도구로 소개합니다. 단순한 농담처럼 보이지만, 제품의 위치는 꽤 선명합니다. React Doctor는 React 코드베이스를 deterministic하게 scan해 state와 effects, performance, architecture, security, accessibility, framework-specific pattern의 문제를 찾겠다고 말합니다. 즉 AI 코딩 도구의 앞단 prompt가 아니라, 뒤쪽 검수 루프에 붙는 도구입니다.

React Doctor 공식 로고

확인 시점인 2026년 5월 28일 GitHub API 기준 millionco/react-doctor 저장소는 11,188 stars와 361 forks를 기록했습니다. 저장소는 2026년 2월 13일 만들어졌고, pushed_at은 2026년 5월 28일 03:37:45Z였습니다. 최신 GitHub release는 eslint-plugin-react-doctor@0.2.9로 2026년 5월 27일 08:04:15Z에 게시됐고, tag 목록에는 react-doctor@0.2.9도 같은 커밋으로 올라와 있습니다. 숫자만으로 성숙도를 단정할 수는 없지만, AI 코드 품질이라는 좁은 문제에 개발자 관심이 빠르게 붙고 있다는 신호로는 충분합니다.

왜 React인가

React는 코딩 에이전트에게 쉬워 보이는 대상입니다. 컴포넌트 파일은 비교적 독립적이고, 패턴이 공개 예제에 많이 노출돼 있으며, UI 변경은 화면으로 바로 확인할 수 있습니다. 그래서 AI 코딩 데모에는 React와 Next.js가 자주 등장합니다. 하지만 실제 제품 코드에서 React는 단순 template 생성보다 훨씬 까다롭습니다. 상태의 소유권, effect의 생명주기, server component와 client component의 경계, accessibility semantics, hydration, bundle size, async data path가 얽힙니다.

기존 lint와 typecheck가 이 문제를 모두 막아주지는 않습니다. TypeScript가 타입을 맞춰도 effect가 두 번 호출되는 문제는 남을 수 있습니다. ESLint가 syntax와 일부 hook 규칙을 잡아도 사용자 흐름에서 불필요한 rerender가 생길 수 있습니다. 접근성 plugin이 빠진 alt를 말해도 keyboard flow나 focus management까지 자동으로 보장하지는 않습니다. 프레임워크별 권장 패턴은 더 자주 바뀝니다. Next.js, Vite, TanStack, React Native, Expo는 모두 React를 쓰지만, 품질 기준과 실패 모드가 같지 않습니다.

React Doctor는 이 틈을 "AI가 만든 React 코드"라는 이름으로 다시 포장합니다. 사실 문제 자체는 AI 이전에도 있었습니다. 다만 AI 이후에는 diff의 양과 속도가 달라졌습니다. 사람이 하루에 하나의 컴포넌트를 고치던 팀이 에이전트로 한 번에 열 개 파일을 바꾸면, 리뷰어가 모든 effect와 props 흐름을 손으로 다시 추적하기 어렵습니다. 따라서 품질 관리의 질문은 "에이전트에게 어떤 지시를 더 줄까"에서 "에이전트가 낸 결과를 어떤 자동 루프로 다시 읽을까"로 이동합니다.

도구가 제안하는 세 가지 표면

React Doctor의 배포 경로는 이 도구가 무엇을 노리는지 보여줍니다. 첫 번째는 로컬 CLI입니다. README의 quick start는 프로젝트 루트에서 npx react-doctor@latest를 실행해 audit을 받는 방식입니다. 에이전트가 만든 변경 사항을 사람이 확인하기 전에 로컬에서 한 번 훑는 사용법입니다.

두 번째는 agent install입니다. npx react-doctor@latest install을 실행하면 coding agent가 이후 문제를 배우고 수정하도록 skill을 설치할 수 있다고 문서화돼 있습니다. README는 Claude Code, Cursor, Codex, OpenCode 등을 명시합니다. 이 대목이 핵심입니다. React Doctor는 "사람이 CLI를 기억해서 실행하는 도구"에 머물지 않고, agent session의 반복 루프에 들어가려 합니다. 에이전트가 React 파일을 고친 뒤 scanner를 돌리고, 결과를 다시 patch로 반영하는 구조입니다.

세 번째는 CI와 PR 표면입니다. GitHub Actions Marketplace action은 pull request를 scan하고 inline annotation과 sticky comment를 남길 수 있습니다. React Doctor 문서는 diff로 PR 변경 파일에 집중하고, annotations로 GitHub Files changed view에 표시하며, github-token으로 PR comment를 업데이트하는 흐름을 제시합니다. 이는 AI 코드 검수가 리뷰어가 이미 보는 표면으로 들어가야 한다는 판단입니다. 별도 dashboard보다 PR comment가 더 강합니다.

검수 표면기존 React 팀의 기본값React Doctor가 붙이는 층
로컬 개발typecheck, lint, 테스트를 사람이 선택 실행npx react-doctor@latest로 React-specific audit 실행
에이전트 루프prompt와 프로젝트 규칙 파일에 품질 기준 작성agent skill과 hook으로 scanner 결과를 다시 수정 입력으로 사용
Pull Request리뷰어가 diff와 CI 실패를 수동 해석GitHub annotation과 sticky comment로 변경 파일의 진단을 노출
규칙 엔진ESLint, framework lint, TypeScript checker 중심oxlint plugin을 canonical rule 구현으로 두고 ESLint mirror 제공

AI 코드 검수는 왜 prompt만으로 부족한가

코딩 에이전트 품질을 높이는 가장 쉬운 방법은 규칙 파일을 더 쓰는 것입니다. AGENTS.md, CLAUDE.md, Cursor rules, repository instruction에 "불필요한 effect를 쓰지 말라", "accessibility를 지켜라", "server component를 우선하라" 같은 지시를 넣습니다. 이 방식은 필요합니다. 그러나 충분하지 않습니다. 모델은 긴 규칙을 항상 같은 강도로 지키지 않고, 작업이 복잡해질수록 일부 규칙을 잊습니다. 더 큰 문제는 결과 코드가 정말 규칙을 지켰는지 확인하는 일이 prompt 바깥에 있다는 점입니다.

React Doctor가 말하는 deterministic scanner는 이 바깥쪽 검사입니다. 모델에게 "잘해줘"라고 말하는 대신, 결과물을 정해진 규칙으로 다시 읽습니다. 이 구조는 AI 시대의 개발 워크플로에서 더 중요해집니다. 에이전트는 자연어 지시를 따르는 확률적 시스템이지만, 제품 저장소는 repeatable gate를 필요로 합니다. 특히 React UI는 작은 코드 냄새가 사용자의 입력 지연, focus 손실, layout shift, 접근성 회귀로 이어질 수 있습니다. 리뷰어의 직감만으로는 충분하지 않습니다.

이 점에서 React Doctor는 CodeRabbit이나 일반 AI reviewer와도 다릅니다. AI reviewer는 또 다른 모델을 써서 diff를 읽습니다. 좋은 맥락 설명을 줄 수 있지만, 일관성과 비용 문제가 남습니다. 반면 React Doctor는 정적 분석과 lint plugin 형태로 들어갑니다. 모든 것을 이해하지는 못해도, 같은 규칙을 반복 적용하고 CI에서 같은 결과를 낼 수 있습니다. AI가 만든 코드를 AI로만 다시 판단하지 않고, deterministic한 층을 끼운다는 점이 뉴스입니다.

기존 lint를 대체하는 도구는 아닙니다

React Doctor 공식 문서는 자신이 기존 lint setup의 대체재가 아니라고 선을 긋습니다. CLI, CI check, standalone oxlint와 ESLint plugin으로 실행할 수 있고, 기존 ignore file과 JSON ESLint/oxlint rule setting을 존중할 수 있다고 설명합니다. 이 태도는 중요합니다. React 팀은 이미 TypeScript, ESLint, Prettier, framework lint, unit test, E2E test를 갖고 있습니다. 새 도구가 이 체계를 갈아엎겠다고 하면 도입 장벽이 높아집니다.

더 현실적인 위치는 보조 진단기입니다. 기존 lint가 syntax와 범용 규칙을 맡고, React Doctor가 AI-generated diff에서 자주 보이는 React-specific 문제를 더 강하게 봅니다. 예를 들어 PR comment surface에서는 약한 design cleanup을 제외해 comment를 집중시킬 수 있다는 문서 내용도 있습니다. 이는 모든 문제를 한 번에 쏟아내는 도구보다, 리뷰어가 action할 만한 신호를 선별하는 쪽에 가깝습니다.

물론 이 전략은 rule 품질에 크게 의존합니다. React ecosystem은 다양합니다. 어떤 팀은 effect를 최소화하고 server state library를 강하게 쓰지만, 어떤 팀은 legacy state와 imperative integration을 많이 갖고 있습니다. React Native와 Next.js 앱의 위험 패턴도 다릅니다. 정적 분석 도구가 이 차이를 모르면 false positive가 늘고, 개발자는 금방 경고를 무시합니다. 따라서 React Doctor 도입의 첫 단계는 전체 저장소에 blocking gate를 거는 것이 아니라, 최근 AI-generated PR 몇 개에 non-blocking으로 붙여 signal-to-noise를 보는 것입니다.

11.1k 스타가 말하는 시장 신호

오픈소스 star는 품질 보증서가 아닙니다. 바이럴 문구와 좋은 README, 커뮤니티 관심만으로도 빠르게 올라갈 수 있습니다. 그래도 React Doctor의 11.1k stars는 무시하기 어렵습니다. 특히 이 프로젝트가 2026년 2월 만들어졌고, 5월 말 현재 AI coding agent와 React 품질이라는 좁은 intersection에서 주목받고 있다는 점이 중요합니다. 개발자들이 이미 "AI가 코드를 많이 쓰는 건 알겠는데, 그 뒤처리는 누가 하나"라는 질문을 하고 있다는 뜻입니다.

GeekNews에서도 이 포인트가 잡혔습니다. 2026년 5월 28일 확인한 최신 목록에는 "AI가 생성한 React 코드를 정적 분석으로 검증하는 진단 도구"라는 설명으로 React Doctor가 공유됐고, 약 20시간 만에 17 points와 댓글 1개를 기록했습니다. 큰 토론이라고 보기는 어렵지만, 한국 개발자 커뮤니티에서도 AI coding의 다음 이슈가 생성 경험보다 검증 경험으로 이동한다는 신호로 읽을 수 있습니다.

이 흐름은 최근 코딩 에이전트 뉴스와도 맞물립니다. 한쪽에서는 Joule Index처럼 agent 비용과 trace를 묻는 벤치마크가 나오고, 다른 한쪽에서는 React Doctor처럼 agent output quality를 다시 읽는 도구가 나옵니다. 공통점은 "AI가 할 수 있다" 다음 질문입니다. 얼마나 비용이 들었고, 어떤 증거가 남았고, 누가 검수했으며, 팀의 품질 기준을 어떻게 반복 적용했습니까. 코딩 에이전트가 개인 생산성 도구에서 팀의 개발 시스템으로 들어가면 이 질문이 중심이 됩니다.

PR 리뷰의 역할이 바뀐다

React Doctor 같은 도구가 보편화되면 PR 리뷰의 역할도 조금 바뀝니다. 리뷰어는 더 이상 모든 mechanical issue를 눈으로 찾아야 하는 사람이 아닙니다. 대신 자동 도구가 올린 진단이 실제 제품 맥락에서 맞는지 판단하고, 더 높은 수준의 architecture와 user flow를 봐야 합니다. 이는 리뷰어를 대체한다기보다, 리뷰어의 시간을 어디에 쓸지 재배치하는 변화입니다.

AI-generated PR에서는 이 재배치가 특히 중요합니다. 사람이 만든 PR은 작성자가 설계 의도를 기억하고 있습니다. 에이전트가 만든 PR은 의도가 prompt와 대화 기록, 그리고 생성된 diff 사이에 흩어져 있습니다. 리뷰어가 "왜 이렇게 했나"를 물어도 답이 명확하지 않을 때가 많습니다. 그러면 자동 진단이 더 중요한 context가 됩니다. 어떤 파일에서 어떤 category의 문제가 나왔는지, score가 얼마나 바뀌었는지, 변경 파일만 봤는지 전체 저장소를 봤는지 같은 정보가 리뷰의 출발점이 됩니다.

React Doctor 문서가 sticky PR comment와 GitHub annotation을 강조하는 이유도 이 때문입니다. 별도 보고서는 잘 읽히지 않습니다. 개발자가 이미 보는 diff 화면, failed check, PR comment에 진단을 넣어야 행동으로 이어집니다. 특히 AI agent가 PR을 자동으로 만들거나 수정하는 환경에서는 피드백도 agent가 읽을 수 있는 표면에 있어야 합니다. 사람이 읽는 comment와 agent가 다시 수정에 참고하는 comment가 같은 위치에 놓이는 구조입니다.

한국 팀이 도입 전에 볼 것

한국의 프론트엔드 팀이 React Doctor를 바로 blocking CI로 넣는 것은 성급할 수 있습니다. 초기 도구이고, 팀마다 React 관례가 다르기 때문입니다. 그러나 실험 비용은 낮습니다. 먼저 AI 코딩 도구로 생성된 최근 PR 5~10개를 고르고, npx react-doctor@latest --verbose --diff 형태로 변경 파일 중심 scan을 돌려보는 것이 좋습니다. 여기서 실제로 리뷰어가 놓쳤던 이슈가 나오는지, 아니면 스타일 취향에 가까운 경고가 많은지 확인해야 합니다.

두 번째로 false positive를 분류해야 합니다. 정적 분석 도구의 가치는 경고 수가 아니라 action 가능한 경고 비율입니다. 팀이 의도적으로 쓰는 legacy pattern을 계속 문제로 잡는다면 config나 suppression 전략이 필요합니다. 반대로 에이전트가 자주 만드는 anti-pattern이 반복적으로 잡힌다면, 그 규칙은 agent instruction과 CI gate에 모두 반영할 수 있습니다.

세 번째로 agent loop에 넣을지, CI에만 넣을지 결정해야 합니다. 로컬 agent hook은 빠른 self-correction에 좋지만 context와 실행 시간이 늘어날 수 있습니다. CI-only mode는 개발자 경험을 덜 방해하지만, 피드백이 PR 후반에 옵니다. 작은 팀은 non-blocking Git hook이나 PR comment로 시작하고, 신뢰가 쌓인 rule부터 fail-on을 높이는 방식이 현실적입니다.

네 번째로 기존 도구와의 역할 분담을 정해야 합니다. TypeScript는 타입, ESLint는 범용 스타일과 hook 기본 규칙, test는 behavior, React Doctor는 React-specific quality signal이라는 식으로 책임을 나눠야 합니다. 여러 도구가 같은 줄에 서로 다른 comment를 달기 시작하면 리뷰어는 자동 진단을 소음으로 인식합니다.

다섯 번째로 AI-generated code 여부와 상관없이 적용할지 정해야 합니다. 이름은 AI 코드 검수에 맞춰져 있지만, React Doctor가 잡는 문제는 사람이 만든 코드에도 생깁니다. 다만 도입 명분은 AI PR에서 더 쉽습니다. "사람 코드를 더 통제하자"보다 "에이전트가 만든 diff에는 추가 검수 루프를 붙이자"가 조직 내 합의가 쉽습니다.

더 큰 흐름: 생성 후 감사

React Doctor의 등장은 하나의 작은 오픈소스 도구 뉴스로 끝나지 않습니다. AI 개발 도구 시장의 무게중심이 "생성"에서 "생성 후 감사"로 옮겨가는 징후입니다. 2024년과 2025년의 질문은 "AI가 코드를 쓸 수 있나"였습니다. 2026년의 질문은 "AI가 쓴 코드를 어떤 운영 체계 안에서 받아들일 것인가"입니다. 비용 benchmark, sandbox, trace, policy, static scanner, PR annotation, agent memory control이 모두 같은 방향을 가리킵니다.

프론트엔드에서는 이 변화가 더 빨리 보일 수 있습니다. UI 코드는 AI가 만들기 쉽고, 변경량이 많고, 사용자가 바로 체감합니다. 동시에 regression도 은근합니다. 버튼은 보이지만 keyboard로 접근할 수 없고, 화면은 맞지만 state가 오래된 값을 잡고 있고, hydrate는 되지만 bundle이 커지고, 테스트는 통과하지만 실제 form flow가 깨질 수 있습니다. 에이전트가 이 문제를 완전히 이해할 때까지 기다리는 것보다, 에이전트 뒤에 반복 가능한 검사층을 붙이는 쪽이 더 빠릅니다.

React Doctor가 장기적으로 성공하려면 세 가지를 증명해야 합니다. 첫째, 기존 lint가 놓치는 실제 React issue를 충분히 잡아야 합니다. 둘째, false positive를 줄이고 팀별 config를 현실적으로 제공해야 합니다. 셋째, agent loop와 PR surface에서 개발자의 시간을 아껴야 합니다. stars와 좋은 tagline은 출발점일 뿐입니다. 도구의 진짜 평가는 몇 주 뒤 팀의 PR comment가 여전히 읽히는지, 경고가 실제 결함을 줄였는지에서 나옵니다.

그래도 이번 신호는 분명합니다. 코딩 에이전트 시대의 품질 관리는 더 좋은 prompt만으로 해결되지 않습니다. React처럼 상태와 UI 의미론이 촘촘한 영역에서는 생성된 diff를 다시 읽는 deterministic layer가 필요합니다. React Doctor는 그 layer를 CLI, agent skill, GitHub Actions, lint plugin이라는 익숙한 표면에 올려놓았습니다. AI가 코드를 더 많이 쓰는 시대라면, 좋은 개발팀은 AI가 쓴 코드를 더 체계적으로 의심하는 도구도 함께 갖춰야 합니다.

출처