[ Fire Base / ver. 9.14.0 ] 2. 업로드된 컴포넌트 삭제/수정 기능

1. Real Time 기능 게시글과 이어지는 내용이다.

글을 입력하고 업로드하면 마운트되는 컴포넌트의 이름은 Zweet이며

 

Zweet.js내부에 단독으로 존재한다. ( 아래 내용들 모두 Zweet.js의 내용 )

 

# 메소드 영역

import React, {useState} from "react";
import {dbService} from "../Fbase";  //Fbase.js에서 가져온 변수이고 getFirestore메소드이다.
import {deleteDoc, doc, updateDoc } from "firebase/firestore";


export const Zweet = ({ zweetObj, isOwner })=> {   
//zweetObj = 최신화된 유저오브젝트 , isOwner = 글쓴이가 맞는지 여부

    const [editing, setEditing] = useState(false);            //에디트 활성화 여부
    const [newZweet, setNewZweet] = useState(zweetObj.text);  //에디트input의 text
    
    const zweetTextRef = doc(dbService, "zweets", `${zweetObj.id}`);
    //중복코드를 변수로 선언
    
    const onDeleteClick = async () => {
        const ok = window.confirm("Are you sure you want to delete this zweet?");
        if(ok){
            await deleteDoc(zweetTextRef);
        }
    };
    //confirm메소드를 사용하여 boolean값을 받고 true면 deleteDoc메소드를 실행한다
    
    const toggleEditing = () => setEditing((prev)=> !prev);   //에디트를 활성화/비활성화 시킨다
    const onChange = ({target:{value}})=> setNewZweet(value); //벨류가 바뀌면 re-render시킨다
    
    const onSubmit = async (e) => {
        e.preventDefault();
        await updateDoc(zweetTextRef,{
            text: newZweet,
        });
        setEditing(false);
    };
    //text를 newZweet의 value로 바꿔서 업데이트하고 다시 에디트를 비활성화 시켜준다.

 

# 컴포넌트 마운트 영역

    return (
        <div>
            {
                editing ? (
                    <>
                        <form onSubmit={onSubmit}>
                            <input type="text"
                                   placeholder="Edit your zweet"
                                   value={newZweet}
                                   required
                                   onChange={onChange}
                            />
                            <input
                                type="submit"
                                value="Update Zweet"
                            />
                        </form>
                        <button onClick={toggleEditing}>Cancel</button>
                    </>
                ) : (
                    <>
                        <div>
                            <h4>{zweetObj.text}</h4>
                            {isOwner && (
                                <>
                                    <button onClick={onDeleteClick}>Delete Zweet</button>
                                    <button onClick={toggleEditing}>Edit Zweet</button>
                                </>
                            )}
                        </div>
                    </>
                )
            }
        </div>
    );

에디트컴포넌트의 Default 값은 false이기 때문에 unmount이다. 에디트 버튼을 클릭할 경우 toggleEditing함수가 실행되어서 editing = true가 되고 에디트컴포넌트가 mount 된다. 이 후 input에 글을 수정하여 submit시키면(Enter or Edit Zweet 버튼) onSubmit함수에 의해 updateDoc메소드가 실행되어 업데이트되고 onSubmit의 로직처리중 마지막, setEditing(false)로 인해 다시 에디트컴포넌트는 unmount되고 홈컴포넌트가 mount된다.