[ChatGPT 챗봇 실습 2강] React로 챗봇 UI 만들기 – 기본 구조 설계

이번 실습에서는 ChatGPT와의 연동 없이 React만으로 챗봇 UI의 기본 구조를 만들어봅니다.
사용자 입력, 메시지 출력, 전송 버튼까지 포함된 구조를 직접 구성해보며 챗봇의 뼈대를 완성합니다.

용어 설명

• 컴포넌트(Component): UI를 구성하는 독립적인 React 단위
• useState: React에서 상태(입력값, 메시지 목록 등)를 관리하는 훅
• 이벤트 처리: 버튼 클릭, 입력 등 사용자 동작에 반응하는 기능

기본 개념

• 챗봇 인터페이스는 ① 메시지 목록 출력 영역, ② 입력창, ③ 전송 버튼으로 구성됩니다.
• 상태(state)를 이용해 입력값과 메시지를 관리합니다.
• 아직 ChatGPT API는 연결하지 않으며, 사용자 메시지만 출력합니다.

주요 사용 위치/상황

• 챗봇 프로젝트 UI 설계 초기 단계
• 메시지 전송 흐름 구현 전 프론트엔드 틀 잡기
• 상태관리 및 이벤트 처리 연습 예제로도 활용 가능

구체적 코드 예시

// src/components/ChatBot.jsx
import { useState } from 'react';

export default function ChatBot() {
  const [input, setInput] = useState('');
  const [messages, setMessages] = useState([]);

  const handleSend = () => {
    if (!input.trim()) return;
    setMessages([...messages, { role: 'user', content: input }]);
    setInput('');
  };

  return (
    <div>
      <div style={{ height: '300px', overflowY: 'auto', border: '1px solid #ccc', padding: '10px' }}>
        {messages.map((msg, idx) => (
          <p key={idx}><strong>{msg.role}:</strong> {msg.content}</p>
        ))}
      </div>
      <input
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="메시지를 입력하세요"
      />
      <button onClick={handleSend}>전송</button>
    </div>
  );
}

// src/App.jsx
import ChatBot from './components/ChatBot';

function App() {
  return (
    <div>
      <h1>💬 나만의 챗봇</h1>
      <ChatBot />
    </div>
  );
}

export default App;

단계 요약

• useState로 입력값과 메시지 상태 구성
• 버튼 클릭 시 메시지 추가 및 입력값 초기화
• 리스트 렌더링으로 대화 UI 구성

코드 컴포넌트는 2개면 충분한가?

코드 컴포넌트를 2개로 구성하는 것이 가장 효율적입니다.

구성 설명

1. ChatBot.jsx
   • 챗봇의 핵심 로직이 들어 있는 컴포넌트
   • 입력창, 메시지 리스트, 전송 버튼 등 상태 관리와 이벤트 처리 포함
2. App.jsx
   • ChatBot 컴포넌트를 불러와 렌더링하는 기본 진입점
   • 구조가 단순하여 전체 흐름을 한눈에 이해 가능

 2개만으로 충분한 이유

• 학습자가 가장 궁금해하는 “입력 → 출력 → 상태 처리”를 ChatBot.jsx 하나로 충분히 전달 가능
• App.jsx는 진입점 역할만 하므로 코드 설명을 최소화해도 이해에 문제 없음
• 컴포넌트를 지나치게 분리하면 오히려 초보자에게는 진입 장벽이 될 수 있음
• 복잡한 구조 분리는 이후 단계(4강 이후)에 도입하는 것이 자연스럽고 학습 부담이 적음

 확장 시점은 언제?

• API 연동, 보안 처리, 상태 관리 등 기능이 추가되는 4강 이후부터 컴포넌트/디렉토리 분리 도입
• 이 시점부터 components, services, contexts, pages 등의 구조로 확장 가능

단계 요약

• 챗봇 UI 설계 초기에는 ChatBot.jsx, App.jsx 두 개만으로 충분
• 학습 집중도, 실습 흡수력, 코드 가독성 측면에서 최적
• 이후 단계에서 점진적으로 구조 확장

💬 댓글

이번 글이 도움이 되었길 바랍니다. 궁금한 점이나 요청이 있다면 언제든 댓글로 남겨주세요. 댓글은 저에게 큰 힘이 됩니다. 다음 글도 기대해주세요.