AI가 쓴 React 코드, React Doctor가 먼저 잡아요

AI가 쓴 React 코드, React Doctor가 먼저 잡아요

AI 뉴스 썸네일

AI 코딩 도구가 만든 React 코드를 사람이 전부 다시 읽기 어려워졌어요. React Doctor는 이 빈틈을 정적 분석으로 메우려는 오픈소스 진단 도구예요. 프로젝트를 한 번 스캔하면 상태 관리, 부수 효과, 성능, 보안, 접근성까지 한 번에 점검해요. 1

핵심 요약

구분	핵심	왜 볼 만한가요
AI 코딩 검증	React Doctor는 AI가 만든 React 코드의 문제를 정적 분석으로 찾는 도구예요	코드 생성 이후의 품질 검사가 점점 중요한 과제가 되고 있어요
개발자 도구	`npx react-doctor@latest`로 프로젝트를 스캔하고 0~100점 진단 결과를 받아요	별도 설정보다 빠른 감사 흐름을 앞세워요
팀 워크플로	GitHub Actions, 에이전트 연동, diff 스캔을 지원해요	개인 점검에서 PR 리뷰와 CI 흐름까지 이어질 수 있어요

1. React Doctor는 AI 코드의 사후 검진을 노려요

React Doctor의 메시지는 꽤 직접적이에요. GitHub 저장소의 README는 "Your agent writes bad React, this catches it"이라고 말해요. AI 코딩 도구가 빠르게 코드를 만들지만, 그 코드가 React 관점에서 안전하고 유지보수 가능한지는 별도 문제라는 뜻이에요. 2

사용법은 가볍게 시작해요. 프로젝트 루트에서 `npx react-doctor@latest`를 실행하면 코드베이스를 스캔하고 진단 결과를 보여줘요. 검사 범위는 상태와 effect, 성능, 아키텍처, 보안, 접근성까지 넓게 잡혀 있어요. Next.js, Vite, TanStack, React Native, Expo 같은 React 생태계 도구도 대상으로 삼아요. 2

흥미로운 지점은 이 도구가 일반 린터보다 "감사"에 가까운 포지션을 잡는다는 점이에요. ESLint 규칙을 하나씩 고르고 팀 규칙으로 맞추는 흐름보다, 지금 프로젝트가 얼마나 위험한지 먼저 보여주는 쪽에 가까워요. AI가 만든 코드가 늘어날수록 이런 사후 검진 도구의 자리가 더 분명해질 수 있어요.

2. 에이전트와 CI 안으로 들어가려 해요

React Doctor는 코딩 에이전트와의 연결도 전면에 내세워요. `npx react-doctor@latest install`을 실행하면 Claude Code, Cursor, Codex, OpenCode 같은 도구와 함께 쓰는 흐름을 지원해요. 사람이 매번 기억해서 실행하는 도구라기보다, AI가 코드를 만든 뒤 다시 점검하는 루프에 넣으려는 방향이에요. 1

팀 단위에서는 GitHub Actions 지원이 눈에 들어와요. 공식 액션을 추가하면 PR마다 인라인 어노테이션과 코멘트로 진단 결과를 남길 수 있어요. `--diff` 모드를 쓰면 변경된 파일만 훑어서 CI 시간을 줄일 수 있어요. 2

이런 방식은 코드 리뷰의 부담을 조금 다르게 나눠요. 리뷰어가 모든 React 안티패턴을 눈으로 찾기보다, 도구가 반복적인 위험 신호를 먼저 올려 줘요. 사람은 그 결과가 실제 제품 맥락에서 중요한지 판단하는 역할에 더 집중할 수 있어요.

3. 아직은 빠르게 변하는 초기 도구예요

GeekNews 소개에 따르면 React Doctor는 Million.co가 만들었고 MIT 라이선스로 공개되어 있어요. oxlint 기반 규칙, React Compiler 관련 검사, 프로그래밍 방식 접근을 위한 `@react-doctor/api` 같은 요소도 언급돼요. 1

다만 아직 메이저 버전 도구로 보기는 어려워요. GeekNews 글은 v0.2.x대의 빠른 릴리스 흐름을 언급해요. 규칙 이름이나 API, 결과 형식이 바뀔 여지가 있다는 뜻이에요. 실제 프로젝트에 붙일 때는 CI에서 곧바로 실패 조건으로 쓰기보다, 먼저 리포트 모드로 돌려 보고 팀에 맞는 기준을 잡는 편이 안전해 보여요.

댓글 반응도 현실적인 쪽이에요. 한 사용자는 bunx로 실행해 보니 오류와 경고를 많이 잡았고, 대부분은 큰 의미가 없었지만, 놓친 오류 몇 가지를 찾아냈다고 남겼어요. 이 말은 도구의 성격을 잘 보여줘요. 정답을 대신 내려주는 도구라기보다, 놓치기 쉬운 신호를 넓게 던져 주는 보조 진단에 가까워요. 1

왜 중요한가요

AI 코딩 도구가 만드는 코드는 이제 초안 수준을 넘어 실제 PR까지 올라와요. 문제는 생성 속도가 빨라질수록 검토 속도도 같이 빨라져야 한다는 점이에요. React Doctor 같은 도구는 그 사이에 자동 점검 레이어를 하나 더 넣는 시도예요. 2

특히 프런트엔드 코드는 화면이 정상처럼 보여도 effect 의존성, 접근성, 성능, 보안 문제가 뒤늦게 드러날 수 있어요. AI가 만든 컴포넌트를 그대로 합치기 전에 한 번 더 스캔하면, 사람이 리뷰해야 할 지점을 더 빨리 좁힐 수 있어요.

이 흐름은 AI 코딩의 다음 단계를 보여줘요. 이제 질문은 "AI가 코드를 만들 수 있나요"에서 "AI가 만든 코드를 어떤 기준으로 받아들일까요"로 옮겨가고 있어요. 생성 도구와 진단 도구가 한 세트로 묶일수록, 개발팀의 품질 기준도 더 명시적으로 관리될 가능성이 커요.

참고 자료

1. React Doctor — AI가 생성한 React 코드를 정적 분석으로 검증하는 진단 도구 — GeekNews
2. millionco/react-doctor — GitHub