MDX 컴포넌트·Props 추출기

브라우저 처리

MDX 문서에 쓰인 React 컴포넌트와 props를 '컴포넌트 · 이름=값' 목록으로 뽑습니다. 이중 중괄호 객체 값과 펼침 전달(...rest)도 그대로 읽고 코드 블록 속 예시는 뺍니다.

사용 전 확인

파일·이미지·문서 처리 도구는 브라우저 안에서 처리되더라도 원본에 개인정보나 민감 정보가 포함될 수 있습니다. 공유·제출 전 원본과 결과를 한 번 더 확인하세요.

도구 실행입력 후 결과 확인

MDX 컴포넌트·Props 추출기 샘플 실행

Docusaurus나 Next.js 문서를 오래 쓰다 보면 어떤 컴포넌트를 어디에 어떤 props로 썼는지 파악하기 어려워집니다. 컴포넌트 이름을 바꾸거나 props를 없앨 때 영향받는 곳을 찾으려면 이 목록이 필요합니다.

브라우저 처리

샘플 입력

<Card title="Tools" count={800} featured />
<Alert kind="info">내용</Alert>

샘플 결과

Card	title=Tools; count=800; featured=true
Alert	kind=info

자바스크립트가 활성화되면 이 영역이 실제 입력, 실행, 결과 패널로 바뀝니다.

MDX 컴포넌트·Props 추출기 사용 가이드

이 추출기는 대문자로 시작하는 태그(<Card>, <Tabs.Item>)를 찾아 한 줄에 하나씩 '컴포넌트 · props'로 보여 줍니다. 문자열 값은 따옴표를 떼고, {800}이나 data={{a: 1}}처럼 중괄호 값은 안쪽 내용을 그대로, 값 없이 쓴 featured는 true로, {...rest} 같은 펼침 전달은 원문대로 적습니다.

``` 코드 블록과 `한 줄 코드` 안에 적은 예시 태그는 실제 사용이 아니므로 목록에서 뺍니다. 소문자 HTML 태그(<div>)도 대상이 아닙니다.

사용 방법

'MDX 내용' 칸에 .mdx 파일 내용을 붙여 넣습니다.
'실행'을 누르면 컴포넌트마다 이름과 props가 탭으로 나뉘어 나옵니다.
'결과 복사'로 표 계산기에 붙여 컴포넌트별로 정렬하거나 개수를 셉니다.

예시: 카드와 알림 컴포넌트

입력

<Card title="Tools" count={800} featured />
<Alert kind="info">내용</Alert>

결과

Card	title=Tools; count=800; featured=true
Alert	kind=info

닫는 태그 </Alert>는 세지 않고 여는 태그만 한 번씩 목록에 넣습니다.

이럴 때 쓰면 좋아요

컴포넌트 이름을 바꾸기 전에 사용 위치와 props를 모을 때
문서 사이트에서 더 이상 쓰지 않는 props를 찾을 때
디자인 시스템 컴포넌트가 문서에 얼마나 쓰이는지 셀 때
MDX를 다른 형식으로 옮기기 전에 바꿔야 할 컴포넌트를 정리할 때

문제가 생겼을 때

'MDX 컴포넌트를 찾지 못했습니다'

대문자로 시작하는 태그만 컴포넌트로 봅니다. <card>처럼 소문자로 쓴 태그나 코드 블록 안 예시뿐이라면 결과가 비어 있습니다.

props가 중간에서 끊김

닫히지 않은 따옴표나 중괄호가 있으면 다음 태그까지 이어서 읽습니다. MDX 문법 검사기로 짝이 맞는지 먼저 확인하세요.

활용 팁

같은 컴포넌트가 여러 번 나오면 줄도 여러 번 나옵니다. 표 계산기에서 첫 열로 정렬하면 컴포넌트별 사용 횟수를 바로 볼 수 있습니다.
props 값이 길면 결과에서 그대로 보여 주므로, 큰 객체는 별도 파일로 빼서 import하는 편이 문서도 깔끔해집니다.

자주 묻는 질문

<Tabs.Item> 같은 점 표기도 읽나요?

네. 대문자로 시작하면 Tabs.Item처럼 점이 들어간 이름도 컴포넌트 하나로 읽습니다.

import 문도 분석하나요?

아니요. 실제로 태그로 쓰인 컴포넌트만 뽑습니다. import했지만 쓰지 않는 컴포넌트는 목록에 없습니다.

props 값의 종류(문자열·숫자)도 구분하나요?

따옴표 값은 따옴표를 뗀 글자로, 중괄호 값은 안쪽 식 그대로 보여 줍니다. 원문 표기를 보면 종류를 구분할 수 있습니다.