솔직히 말씀드릴게요.
저도 처음에는 AI가 짜준 코드를 못 믿었습니다.
“내가 직접 짜는 게 더 빠르지 않나?”
이런 생각, 개발자라면 누구나 한 번쯤 해보셨을 겁니다.
그런데
마감일은 다가오고,
단순 반복적인 UI 컴포넌트는 끝없이 쏟아지는 상황을 겪어보셨나요?
저는 지난달 프로젝트 마감 직전,
GPT를 제대로 활용하면서 ‘신세계’를 경험했습니다.
- 단순 UI 구현 시간: 4시간 → 30분 단축
- 타입스크립트 오류 수정: 1시간 → 5분 해결
- 테스트 코드 작성: 가장 하기 싫은 업무 1위 → GPT가 10초 컷
오늘은 제가 실무에서 직접 검증하고 다듬은
‘리액트 컴포넌트 작성 필승 프롬프트 모음’을 공유하려 합니다.
복사해서 바로 쓰실 수 있도록 정리했으니,
이 글을 끝까지 읽으시면 여러분의 퇴근 시간이 빨라질 거라 확신합니다.
🚀 1. 기본 골격부터 튼튼하게: 구조 잡기 프롬프트
리액트 컴포넌트를 만들 때 가장 귀찮은 게 뭘까요?
바로 ‘보일러플레이트’ 코드 작성입니다.
파일명 만들고,
import 구문 쓰고,
props 타입 정의하고…
이런 반복 작업은 AI에게 맡기세요.
하지만 그냥 “컴포넌트 짜줘”라고 하면
엉터리 코드가 나옵니다.
구체적인 제약 조건을 걸어주는 게 핵심입니다.
“너는 시니어 프론트엔드 개발자야.
다음 요구사항에 맞춰 React 함수형 컴포넌트를 작성해줘:
1. 컴포넌트 이름: [CardWidget]
2. 언어: TypeScript
3. 스타일링: Tailwind CSS 사용
4. Props: title(string), content(string), imageUrl(optional string)
5. 기능: 이미지가 없으면 기본 플레이스홀더 표시
6. 코드 스타일: 화살표 함수 사용, React.FC 사용 지양, Props 구조 분해 할당 적용”
이렇게 요청하면,
여러분이 수정할 필요도 없이
바로 실무에 투입 가능한 깔끔한 코드가 나옵니다.
특히 ‘React.FC 지양’ 같은 디테일한 조건을 넣어야
최신 트렌드에 맞는 코드를 얻을 수 있습니다.
🎨 2. 스타일링의 고통에서 해방: UI/UX 프롬프트
기능은 짰는데,
CSS 만지다가 하루가 다 간 적 있으시죠?
저도 CSS grid랑 flexbox 정렬하다가
화딱지 난 적이 한두 번이 아닙니다.
이럴 땐 GPT에게
‘시각적 묘사’를 맡겨보세요.
“위에서 만든 [CardWidget] 컴포넌트를 모던하고 깔끔한 스타일로 꾸며줘.
[스타일 요구사항]
– 부드러운 그림자(Soft Shadow) 적용
– 마우스 호버 시 살짝 떠오르는 애니메이션 추가 (transition)
– 모바일에서는 세로 배치, 데스크탑에서는 가로 배치 (반응형)
– 다크 모드 지원 (dark: 클래스 활용)
– 색상 테마: 인디고와 슬레이트 그레이 조합”
여기서 중요한 포인트는
‘반응형’과 ‘다크 모드’를 미리 언급하는 것입니다.
나중에 추가하려면 코드를 많이 뜯어고쳐야 하니까요.
처음부터 요청하는 게 시간을 버는 길입니다.
🧠 3. 복잡한 로직도 한방에: 커스텀 훅(Hook) 분리
컴포넌트 안에 `useEffect`랑 `useState`가
뒤죽박죽 섞여 있으면 유지보수가 정말 힘듭니다.
이럴 때 GPT에게
“로직을 분리해줘”라고 시켜보세요.
코드가 마법처럼 깔끔해집니다.
“지금 작성된 컴포넌트에서 데이터 페칭(Fetching) 로직과 상태 관리 로직을
별도의 커스텀 훅 `useCardData`로 분리해줘.
– React Query(TanStack Query)를 사용하는 버전으로 작성해줘.
– 에러 처리와 로딩 상태를 반드시 포함해줘.
– 컴포넌트는 오직 UI 렌더링만 담당하도록 리팩토링해줘.”
이렇게 하면
View와 Logic이 철저하게 분리된
‘클린 코드’를 얻을 수 있습니다.
동료 개발자들이 보고
“코드 정리 누가 했어? 깔끔하네!”라고 칭찬할지도 모릅니다.
🛡️ 4. 버그 없는 코드의 비밀: 테스트 코드 자동화
솔직히 우리끼리 이야기지만,
테스트 코드 짜는 거 정말 귀찮지 않나요?
하지만 안정성을 위해서는 필수입니다.
이 귀찮은 작업을 GPT에게 떠넘기세요.
가장 효율이 좋은 분야가 바로 여기입니다.
“작성된 [CardWidget] 컴포넌트에 대한 유닛 테스트 코드를 작성해줘.
– 도구: Jest + React Testing Library
– 테스트 케이스:
1. Props가 정상적으로 렌더링 되는지 확인
2. 이미지가 없을 때 대체 텍스트가 나오는지 확인
3. 클릭 이벤트가 잘 동작하는지 확인
– `data-testid`를 사용하지 않고, 사용자 관점(role, text)에서 요소를 찾는 방식으로 작성해줘.”
마지막 줄이 핵심입니다.
‘사용자 관점’에서 테스트하라는 조건을 줘야
더 견고하고 실무에 적합한 테스트 코드를 짜줍니다.
🔧 5. 실전 압축! 자주 쓰는 상황별 단축 프롬프트
매번 길게 칠 시간이 어디 있나요?
상황별로 딱 한 줄만 입력해서 해결하는
‘단축 프롬프트’를 표로 정리했습니다.
이건 스크린샷 찍어두거나 메모해두세요!
| 상황 | 추천 프롬프트 (핵심 키워드) |
|---|---|
| 성능 최적화 | “이 컴포넌트 렌더링 성능 최적화해줘. useMemo, useCallback 적절히 사용하고, 불필요한 리렌더링 방지해줘.” |
| 타입 오류 수정 | “이 코드의 ‘any’ 타입을 전부 제거하고, 엄격한(Strict) 인터페이스로 정의해줘.” |
| 접근성 강화 | “웹 접근성(A11Y) 표준에 맞춰서 ARIA 속성과 시멘틱 태그를 보강해줘.” |
| 주석 작성 | “JSDoc 스타일로 함수와 Props에 대한 설명을 달아줘. 파라미터 설명 포함.” |
💡 심화: GPT 프롬프트 사용 시 주의할 점 (할루시네이션 방지)
AI가 만능은 아닙니다.
가끔 없는 라이브러리를 있는 것처럼 말하거나,
deprecated(사용 중단)된 문법을 알려줄 때가 있습니다.
이럴 때 당황하지 말고
이렇게 대처해보세요.
저도 이것 때문에 삽질깨나 했습니다.
1. 버전 명시하기
GPT는 과거 데이터로 학습되어 있습니다.
그래서 항상 최신 버전을 콕 집어 말해줘야 합니다.
“React 18 버전 기준으로 작성해줘.”
“Next.js 14 App Router 방식을 사용해줘.”
이렇게 버전을 박아두면
옛날 방식인 `class` 컴포넌트나
`getInitialProps` 같은 구닥다리 코드를 피할 수 있습니다.
2. 단계별로 검증하기 (Chain of Thought)
한 번에 너무 많은 걸 시키면
AI도 헷갈려합니다.
1️⃣ 구조 먼저 잡고,
2️⃣ 스타일 입히고,
3️⃣ 로직 분리하고.
이렇게 단계별로 대화를 이어나가는 것이
오류를 줄이는 가장 확실한 방법입니다.
- ✅ [ ] import 경로가 내 프로젝트 구조와 맞는가?
- ✅ [ ] 사용된 라이브러리가 현재 내 package.json에 설치되어 있는가?
- ✅ [ ] 변수명이나 함수명이 기존 코드와 충돌하지 않는가?
- ✅ [ ] Tailwind 클래스명이 존재하지 않는 가상의 클래스는 아닌가?
특히 Tailwind CSS를 쓸 때
GPT가 가끔 마음대로 색상 이름(`bg-primary-500` 등)을 지어내기도 합니다.
여러분의 `tailwind.config.js`에 정의된 색상인지 꼭 확인하세요.
🎯 결론: AI는 거들 뿐, 핵심은 당신의 기획력
지금까지 리액트 개발을 도와주는
다양한 GPT 프롬프트들을 알아봤습니다.
이제 코딩은 ‘타이핑’의 영역에서
‘디렉팅(지시)’의 영역으로 넘어가고 있습니다.
제가 드린 프롬프트를 그대로 복사해서 쓰셔도 좋지만,
여러분의 프로젝트 상황에 맞춰
조금씩 변형해서 나만의 무기로 만들어보세요.
지금 바로 진행 중인 프로젝트를 켜고,
가장 복잡해서 건드리기 싫었던 컴포넌트 하나를 골라보세요.
그리고 “섹션 3: 로직 분리 프롬프트”를 사용해서 리팩토링을 요청해보세요.
단 1분 만에 깔끔해진 코드를 보며 희열을 느끼실 겁니다.
여러분의 퇴근 시간이
하루 1시간이라도 빨라지길 응원합니다!
