채팅 중복 없이 저장하기

채팅 기능을 만들었는데 다른 채팅창을 켰을 때 그 전에 거가 다 남아있거나 똑같은 채팅창에서 해도 중복으로 저장이 돼서 이 문제점을 해결한 방법을 기록하고자 작성합니다!

 

📌코드 해석

※ () 안에 적힌 것은 식별자명입니다

1. 채팅하기 버튼을 눌렀을 때 해당 유저 프로필사진, 글의 제목, 글쓴이, 글의 종류, 채팅내용을 저장하는 state(msg)를 만들어서 우선 프로필사진, 제목, 글쓴이, 종류를 저장합니다.

2. input 안에 사용자가 입력한 글을 msg에 저장합니다.

2-1. 이때 채팅 기록 전체를 관리하는 state(chat)에 현재 글제목이 있으면 그 요소 안에 채팅을 추가합니다.

2-2. 그렇지 않으면 msg에 저장합니다.

3. 채팅 닫기 버튼을 눌렀을 때 msg에 저장된 데이터를 chat에 저장합니다.

3-1. 이때 chat에 현재 글제목이 있다면 2-1 에서 chat의 내용을 다른 객체에 복사해서 넣습니다. (배열은 스택에 위치를 저장하고 있기 때문에 내용이 달라져도 위치가 달라지지 않기에 똑같은 배열이라고 인식해서 state가 바뀌지 않습니다.)

let [text, setText] = useState('');
let [msg, setMsg] = useState({userProfile: '', title: '', author: '', kind: '', chat: []});

msg.userProfile = data.user_img;
msg.title = data.title;
msg.author = data.author;
msg.kind = `나눔: ${data.kind}`;


const handleCloseBtn = () => {
for(let i=0; i<chat.length; i++) {
  if(chat[i].title.indexOf(data.title) > -1) {
    let copyChat = [...chat];
    setChat(copyChat);
    setReset();
    return;
  }
}

let copyChat = [...chat];
copyChat.push(msg);
setChat(copyChat);
setReset();
}

const setReset = () => {
let reset = {img: '', title: '', author: '', chat: []};
setTimeout(setMsg(reset), 1000);
setChatBtn(false);
}


const handleChatInput = (e) => {
setText(e.target.value);
};

const handleSubmitBtn = () => {
// chat에 이미 정보가 들어있을 때 -> 채팅 정보만 추가한다.
for(let i=0; i<chat.length; i++) {
  if(text != '' && chat[i].title.indexOf(data.title) > -1) {
    chat[i].chat.push(text);
    inputMsg(text);
    return;
  }
  else {
    continue;
  }
}

// 처음 채팅할 때
if(text != '' ) {
  inputMsg(text);
}
}

const inputMsg = (text) => {
  msg.chat.push(text);
  setText('');
}
}

for문으로 해야만 중복된 부분을 찾을 수 있는 건지 다른 방법은 없는지 찾아보는 중입니다~
그리고 전체 코드는 "채팅창 만들기 React" 부분에 나와있어서 넣지 않았습니다..!