[#React & FirebaseV9 Chat, #ChatApp 만들기 ] 메세지 storage에 저장하기

message 데이터베이스(collection)-
messageRef는 message테이블을 의미함(이전엔 chatroomRef)

1. form에 입력하기

import React, { useState } from 'react';
const [content, setContent] = useState('');

const handleChange = (event) => {
  setContent(event.target.value);
};

<Form onSubmit={handleSubmit}>
  ...중략...
   <Form.Group controlId="exampleForm.ControlTextarea1">
     <Form.Control
        value={content}
        onChange={handleChange}
        as="textarea"
        style={{ width: '100%', height: '100%' }}
          />
   </Form.Group>
</Form>

• content: input에 입력한 텍스트가 저장되는 변수

form에 데이터를 입력하면 빈 값인 변수 content에 value가 저장된다. form에 이벤트 onChange가 호출되면, 함수 handleChange가 실행된다.

handleChange함수는 event를 받아서 target의 value가 content에 저장된다.

form을 클릭했기 때문에, handelSubmit가 호출된다

2. firebase에 텍스트 저장

handelSubmit가 호출된다.

import { getDatabase, ref, set, push, child } from 'firebase/database';

const [errors, setErrors] = useState([]);

//메세지 테이블 정의
const messagesRef = ref(getDatabase(), 'messages');

//리덕스의 정보를 가져옴
  const chatRoom = useSelector((state) => state.chatRoom.currentChatRoom);

 const handleSubmit = async () => {
    if (!content) {
      setErrors((prev) => prev.concat('텍스트를 먼저 작성해주세요'));
      return;
    }
    try {
      await set(push(child(messagesRef, chatRoom.id)), createMessage());
...중략...
    } catch (error) {
...중략...   
    }
  };

에러가 있을 경우, return 처리
메세지 테이블 정의함
리덕스에 있는 클릭 채팅방 정보를 불러옴

firebase 테이블 정의

const messagesRef = ref(getDatabase(), 'messages');

messagesRef는 테이블이름, message를 담당할 테이블이라는 의미
firebase의 database를 가져와 'message'라는 이름으로 테이블을 정의함

firebase에 메세지를 저장하는 부분

await set(push(child(messagesRef, chatRoom.id)), createMessage());

firebase 데이터베이스에 접근하는 것
채팅방 id를 child로 넣어준다.
chatRoom.id은 클릭한 방의 아이디, 리덕스 스토어에 저장되어 있음
모든 정보를 데이터에 set하기 위해 set()을 한다.

message 테이블(이름: messageRef)에 charRoom.id를 설정하는데, 동시에 createMessage 함수내용을 입력할 것이다.

3. createMessage를 호출함

const createMessage = (fileUrl = null) => {
    const message = {
      timestamp: new Date(),
      user: {
        id: user.uid,
        name: user.displayName,
        image: user.photoURL,
      },
    };
    if (fileUrl !== null) {
      // 이미지 url을 받을 경우,
      // 인자로 들어오는 값이 있을 경우
      // 위 message객체의 image키에 해당 fileurl을 설정함
      
   // message 객체의 모습
  // message = {
      //timestamp: new Date(),
      //user: {
         //id: user.uid,
         //name: user.displayName,
         //image: user.photoURL,
      //image : fileUrl
   //},
      
    };
      message['image'] = fileUrl;
    } else {
      //텍스트로 입력될 경우,
      //message 객체에 content키가 생성,
      //content키에 텍스트가 들어옴
      //예: content:'들어온 텍스트'
      
            
   // message 객체의 모습
  // message = {
      //timestamp: new Date(),
      //user: {
         //id: user.uid,
         //name: user.displayName,
         //image: user.photoURL,
      //content : '폼에 입력한 텍스트'
   //},
      message['content'] = content;
    }
  return message;
};

• content: input에 입력한 텍스트가 저장되는 변수

createMessage: 텍스트 혹은 이미지를 받을 건데, 혹시 값이 있을 경우/없을 경우가 있어, fileUrl을 null로 설정함

message['content'] = content;

content는 인풋에 입력한 텍스트 값,
이것이 message객체안의 content라는 이름의 키에 value로 들어감