React로 ChatGPT API 연결해보니… 생각보다 쉽게 채팅 기능 붙일 수 있더라

안녕하세요, 개발자 여러분! 😊
오늘은 제가 직접 React 프로젝트에 ChatGPT API 연결해서 채팅 기능 만들어본 경험을 공유해볼게요.

처음엔 ‘이거 어렵지 않을까?’ 했는데, 막상 해보니 생각보다 간단하더라고요.
아래에 단계별로 정리해봤으니 참고해보세요!

---

✅ 1️⃣ 준비물부터 체크

• ✔ OpenAI API 키 발급 (필수)
• ✔ React 프로젝트 생성
• ✔ axios 설치 (pnpm add axios 또는 npm install axios)

---

✅ 2️⃣ 컴포넌트 구조 잡기

파일명: ChatComponent.js

import React, { useState } from 'react';
import axios from 'axios';

---

✅ 3️⃣ 상태 관리 - 메시지와 입력값 관리

 

const [input, setInput] = useState('');
const [messages, setMessages] = useState([]);

---

✅ 4️⃣ ChatGPT API 호출 함수 작성

 

const API_KEY = 'YOUR_API_KEY_HERE'; // 실제 프로젝트에선 절대 클라이언트에 넣지 마세요

const callChatGPT = async (message) => {
  try {
    const response = await axios.post(
      'https://api.openai.com/v1/chat/completions',
      {
        model: 'gpt-3.5-turbo',
        messages: [{ role: 'user', content: message }],
      },
      {
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${API_KEY}`
        }
      }
    );
    return response.data.choices[0].message.content;
  } catch (error) {
    console.error('ChatGPT API 호출 에러:', error);
    return '죄송합니다. 오류가 발생했어요.';
  }
};

---

✅ 5️⃣ 메시지 전송 핸들러

const handleSend = async () => {
  if (input.trim() === '') return;

  const userMessage = { role: 'user', content: input };
  setMessages([...messages, userMessage]);
  setInput('');

  const response = await callChatGPT(input);
  const botMessage = { role: 'assistant', content: response };
  setMessages(prev => [...prev, botMessage]);
};

---

✅ 6️⃣ 채팅 UI 작성

return (
  <div className="chat-container">
    <div className="chat-messages">
      {messages.map((msg, index) => (
        <div key={index} className={`message ${msg.role}`}>
          {msg.content}
        </div>
      ))}
    </div>
    <div className="chat-input">
      <input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="메시지를 입력하세요..."
      />
      <button onClick={handleSend}>전송</button>
    </div>
  </div>
);

---

✅ 7️⃣ 간단 스타일링 (체험해보세요)

 

.chat-container {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
}
.chat-messages {
  height: 400px;
  overflow-y: auto;
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
}
.message {
  margin-bottom: 10px;
  padding: 5px;
  border-radius: 5px;
}
.user { background-color: #e6f2ff; text-align: right; }
.assistant { background-color: #f0f0f0; }
.chat-input { display: flex; }
.chat-input input { flex-grow: 1; padding: 5px; }
.chat-input button { padding: 5px 10px; background-color: #007bff; color: white; border: none; cursor: pointer; }

---

✅ ⚠️ 실제 써보니 꼭 알아야 할 주의사항

• API Key 절대 클라이언트에 두면 안 됩니다!
  • 실 서비스에선 백엔드 API 만들어서 호출해야 안전합니다.
• 요금 폭탄 조심 — OpenAI API는 사용량 따라 과금됩니다.

---

✅ 직접 써보니 좋았던 점

✔ 채팅 인터페이스 금방 만들 수 있음
✔ ChatGPT API 연결만 하면 자연스러운 대화 가능
✔ axios로 API 호출 구조도 심플해서 초보자도 쉽게 접근 가능

---

✅ 결론 - React에 ChatGPT 붙이는 거 생각보다 쉽습니다

이번에 만들어보면서 느꼈는데,
진짜 어렵게 생각할 필요 없어요.

기본적인 채팅 기능은 하루면 충분히 완성 가능했고,
생각보다 응답 속도도 괜찮아서 실 서비스에 붙이기도 좋겠더라고요.

---

💬 혹시 여러분은 ChatGPT API 붙여보신 적 있으신가요?

직접 해보신 분들 경험이나, 궁금한 점 있으시면 댓글로 남겨주시면
같이 얘기해보면 좋겠습니다 😊