2022. 11. 14. 23:20
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된다.
'Serverless > FireBase' 카테고리의 다른 글
| [ Fire Base / ver. 9.14.0 ] 4. 프로필 기능 (0) | 2022.11.17 |
|---|---|
| [ Fire Base / ver. 9.14.0 ] 3-2. 이미지 업로드, 삭제 기능 (0) | 2022.11.15 |
| [ Fire Base / ver. 9.14.0 ] 3-1. 이미지 업로드 (0) | 2022.11.15 |
| [ Fire Base / ver. 9.14.0 ] 1. Real Time(실시간) 기능 (0) | 2022.11.14 |
| [ Fire Base / ver. 9.14.0 ] Setup (0) | 2022.11.12 |