[ChatGPT 챗봇 실습 6강] 대화 저장 기능 – localStorage로 유지되는 챗봇 만들기

이번 강의에서는 브라우저를 새로고침해도 대화가 유지되는 챗봇을 만들기 위해 localStorage를 활용한 저장 기능을 구현합니다.

용어 설명

• localStorage: 브라우저에 key-value 형태로 데이터를 저장할 수 있는 Web API
• JSON.stringify / JSON.parse: 객체 데이터를 문자열로 저장하고 다시 객체로 변환하는 방식
• useEffect: React에서 컴포넌트 생명주기에 따라 동작하는 훅, 초기 로딩 시 또는 상태 변화 시 실행 가능

기본 개념

• React 상태(messages)를 localStorage에 동기화하여 저장
• 페이지를 새로고침하거나 나갔다가 돌아와도 이전 대화가 복원됨
• 사용자 경험 개선 및 대화 흐름 유지에 효과적

주요 사용 위치

• 고객센터, 지식 기반형 챗봇 등에서 지속성 유지가 필요한 경우
• 대화 로그 기록 및 분석 기능의 기초 처리

구체적 코드 예시

useEffect(() => {
  const saved = localStorage.getItem('chatMessages');
  if (saved) {
    setMessages(JSON.parse(saved));
  }
}, []);

useEffect(() => {
  localStorage.setItem('chatMessages', JSON.stringify(messages));
}, [messages]);

저장 키(chatMessages)는 고유하게 설정 가능하며, 사용자 ID 기반으로 다르게 구성할 수도 있습니다.

핵심 요점 정리

• 컴포넌트 마운트 시 localStorage에서 데이터 불러오기
• messages 배열이 변경될 때마다 localStorage에 저장
• JSON 변환을 통해 문자열 ↔ 객체 형태로 저장/복원

 

💬 댓글

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