ReAct 프롬프트 기법이란?

ReAct 프롬프트 기법은 프론트엔드 개발자뿐 아니라 AI 에이전트, 검색 기반 질의응답, 논리적 추론형 자동화 시스템을 설계할 때 매우 중요한 기법이에요. 이걸 잘 이해하면 Claude나 GPT 계열 모델에서 보다 정확하고, 추론 능력이 뛰어난 답변을 얻을 수 있습니다.

---

🧠 ReAct 프롬프트 기법이란?

ReAct = Reasoning + Acting

ReAct는 AI가 단순히 "대답"만 하는 것이 아니라,
**추론(Reasoning)**과 **행동(Acting)**을 번갈아 가며 수행하도록 유도하는 프롬프트 설계 방식입니다.

---

📌 목적

• 단순 응답이 아니라 생각 과정을 따라가며 답을 내리게 하기
• 도구 사용, 검색, 계산 등 단계적 사고와 행동 분리
• 멀티 스텝으로 문제를 풀거나, 외부 데이터에 의존하는 작업을 정확하게 처리

---

🧬 ReAct 프롬프트 구조

ReAct 기법은 일반적으로 다음과 같은 구성으로 작성됩니다:

질문: [질문 내용]

생각: [AI의 첫 번째 추론]
행동: [어떤 도구를 사용하거나 행동함]
관찰: [행동 결과를 받아봄]

생각: [새로운 생각 or 판단]
행동: ...
...
답변: [최종 결론]

---

📦 예제 1: 계산 문제 (GPT나 Claude에게 계산기처럼 쓰기)

질문: "5개의 사과가 있고, 3개를 더 샀습니다. 사과는 총 몇 개인가요?"

생각: 사과가 5개 있었고, 거기에 3개를 더했습니다.
행동: 계산(5 + 3)
관찰: 8

생각: 계산 결과, 총 사과는 8개입니다.
답변: 사과는 총 8개입니다.

👉 Claude나 GPT가 단순히 "5+3=8"이 아니라, 생각하고 계산 도구를 쓰는 척 하게 됩니다.

---

🧩 예제 2: 검색 기반 정보 수집 (RAG 시스템용)

질문: “서울의 7월 평균 기온은 얼마인가요?”

생각: 서울의 7월 평균 기온은 외부 정보를 찾아야 한다.
행동: 웹 검색("서울 7월 평균 기온")
관찰: 서울의 7월 평균 기온은 약 25.5도입니다.

생각: 관찰 결과를 바탕으로 요약해야 합니다.
답변: 서울의 7월 평균 기온은 약 25.5도입니다.

---

💡 ReAct의 강점 요약

 

특징	설명
🔍 사고 과정 분리	'왜 그렇게 생각했는지' AI가 서술 → 투명한 추론
🛠 도구 호출과 연결 용이	"행동" 파트에 실제 API 호출 / 함수 실행 연결 가능
📚 RAG 시스템에 최적화	벡터 검색 결과를 '관찰'로 받아 다음 추론에 반영
🤖 AI Agent 설계에 핵심	Claude나 GPT를 멀티 스텝 Agent처럼 동작하게 만듦

 

---

🧪 예제 3: 프론트엔드 개발자용 ReAct 프롬프트

질문:

"이 React 컴포넌트에서 무한 루프가 발생하는 이유를 설명해줘"

질문: 이 React 코드에서 무한 루프가 발생하는 이유를 설명해줘.

코드:
useEffect(() => {
  fetchData();
}, [data]);

생각: 이 코드는 useEffect에서 fetchData를 실행하고 있습니다.
행동: data가 바뀔 때마다 useEffect가 실행됨
관찰: fetchData가 data를 바꾸면 → 무한 루프 발생

생각: 의존성 배열에 data가 있어서, 데이터 변경 → fetchData 재실행이 반복되는 것
답변: 무한 루프의 원인은 useEffect의 의존성 배열에 있는 `data`가 `fetchData`에 의해 계속 바뀌기 때문입니다.

---

🤖 Claude나 GPT에 ReAct 프롬프트 적용할 때 팁

✅ 프롬프트 템플릿 예시

너는 숙련된 전문가야. 다음 질문에 답하기 전에,
- 먼저 논리적으로 사고(생각)
- 필요 시 행동(검색, 계산, 코드 분석)
- 그 결과(관찰)를 바탕으로 다시 추론해
- 마지막에 최종 답변을 내려줘

형식은 아래처럼 해줘:
질문: ...
생각: ...
행동: ...
관찰: ...
답변: ...

---

🧠 Claude에 특화된 팁

• Claude는 GPT보다 "사고 흐름"에 민감해서 ReAct 구조가 더 자연스럽게 작동합니다.
• 특히 Claude 3 Opus는 긴 문서 내에서 정보 추출 → 판단에 강력해서 복합 문서 기반 분석 에이전트로 적합합니다.

---

🟦 TypeScript: ReAct Prompt Generator 템플릿

// ReAct Prompt Generator - TypeScript 버전
export const generateReActPrompt = (question: string, context: string = ""): string => {
  return `
너는 숙련된 전문가야. 아래 질문에 대해 단계적으로 사고하고 행동한 뒤, 결론을 내려줘.

질문: ${question}
문맥 정보: ${context}

아래와 같은 형식으로 답변해줘:

생각: ...
행동: ...
관찰: ...
생각: ...
행동: ...
관찰: ...
답변: ...
`;
};

📌 generateReActPrompt("React에서 무한루프가 발생하는 이유는?") 처럼 사용 가능

---

🟨 JSON 템플릿 (API 연동용 or LangChain용)

{
  "prompt_template_name": "ReAct Prompt Generator",
  "description": "Generates a structured ReAct prompt for LLMs to perform multi-step reasoning and actions.",
  "input_variables": ["question", "context"],
  "output_prompt": "너는 숙련된 전문가야. 아래 질문에 대해 단계적으로 사고하고 행동한 뒤, 결론을 내려줘.\n\n질문: {question}\n문맥 정보: {context}\n\n아래와 같은 형식으로 답변해줘:\n\n생각: ...\n행동: ...\n관찰: ...\n생각: ...\n행동: ...\n관찰: ...\n답변: ..."
}

✅ 이 JSON은 LangChain, n8n, or GPT API 자동화 프롬프트에 그대로 활용 가능

✅ 정리

 

개념	설명
ReAct란?	AI가 사고(Reason) + 행동(Act)을 반복하며 문제 해결
활용 분야	RAG 검색, 계산기 Agent, 코드 분석, API 호출 등
형식 구조	생각 → 행동 → 관찰 → 반복 → 최종 답변
도구와 연계	n8n, LangChain, AutoGPT 등과 통합 시 필수 기법