💎[Noitter]💎
5. CRUD(3) : Create/Read/Update/Delete
UPDATE !

🔧Update (수정)

• 로그인 성공한 유저가 자신의 글을 수정(Update)하는 기능
• 내 포스팅 : CRUD(2) : Create/Read/Update/Delete READ ! 에서 분리한 <Noweet />컴포넌트에서 해당 글 유저라면 Update버튼이 노출되게 구현
• Update 버튼을 클릭하면 수정을 위한 UI로 변경되고 글 수정을 완료하면 다시 firebase에 저장
• 단, 자신이 작성한 글이 아니라면 Update 버튼은 노출되면 안됨 ❗

📂Update 파일 구성

1. Home.js

: 로그인 성공 시 자신과 타유저의 글을 열람(Read)할 수 있는 페이지

2. Noweet.js

: 내 포스팅 : CRUD(1) : Create/Read/Update/Delete CREATE ! 에서 작성한 noweet을 출력해줄 페이지
: 수정(Update)버튼을 클릭하면 수정UI를 출력하여 글 수정 후 firebase에 저장해줄꺼임
: state
editing(수정폼 노출 여부 결정, 초기값 : false)
newNoweet(수정할 글 저장, 초기값 : 현재 글 내용)
: function
toggleEditing(editing값을 반대로 변경) ※true면 → false, false면 → true
onChange(수정폼에서 글 입력 시 newNoweet에 value값 저장)
onSubmit(수정 완료한 글을 firebase상에 업로드)
dbService.doc(경로).update({...}) : firebase 데이터 업데이트 명령어

📝Update 기능 구현

수정UI 노출방법 및 수정된 내용 firebase에 저장되는 원리

editing으로 수정버튼을 클릭했는지 체크하고(버튼 클릭 시 toggleEditing실행),
editing===true이면 수정폼 UI 보여줌

수정완료하면 submit버튼의 onSubmit()으로 firebase에 업로드

업로드 완료하면 또 toggleEditing실행하여 editing을 false로 변경한다.

※ toggleEditing이 스위치 역할 ❗ (true=수정폼UI / false=글 Read UI)

Update 전 firebase의 트윗 상태

Update 후 firebase의 트윗 상태

text가 변경되어 저장되었다.
이 상황은 실시간으로 이루어지며,
createAt, createId를 확인해보면 변경전과 동일한 유저의 동일한 트윗임을 확인할 수 있다 !

💻Source Code

Noweet.js 컴포넌트 코드

💗소스코드 자세한 내용은 Github 참고💗

📚정리

1. 수정폼 출력 유무와 같이 동적인 UI를 만들때는 editing, toggleEditing과 같이 스위치를 만들자
   const toggleEditing = () => { setEditing((prev) => !prev) } 이 문법 유용할듯 👍🏻
2. firebase의 firestore에 저장된 글을 수정하려면 isOwner와 같은 변수로 해당 유저의 글인지 확인하자

👍🏻노마드 코더 무료강의 참고

https://nomadcoders.co/nwitter/lobby