트위터 클론코딩 - CRUD 3

Delete 

---

삭제버튼에 넣어줄 함수 onDelete( )를 만들어 그안에 javascript의 윈도우 객체 confrim( ) 메소드를 이용해서 알림창을 띄워줄거다.

confrim은 알림창을 띄워주고 확인을 누르면 true, 취소를 누르면 false를 반환한다. 

 

  const onDelete = () => {
    const ok = window.confirm("정말 삭제 할건가요?");
    if(ok){
        // delete
    }
  };

 

delete 기능은 firebase 문서를 보면된다. 참조를 만들어야 되는데 여기서 참조 주소는 

dbService의 doc 안에 컬렉션이름/만든유저의 id다. 그 뒤 delete( ) 메소드를 해주면 끝이다.

dbService.doc(`gweets/${GweetObj.id}`).delete();

 

 

Update

---

수정버튼을 누르면 기존화면에서 수정창 화면을 보여주기 위해 초기값이 true인 state를 만들어 준다.

그리고 onToggle( ) 함수를 만들어 수정버튼에 넣어주고 누를때마다 Toggle값이 바뀌고 그값으로 조건부 렌더링을 해준다. 

<button onClick={onToggle}>수정</button>

 const [Toggle, setToggle] = useState(true);
 
   const onToggle = () => {
    setToggle(!Toggle);
  };

 

 

수정 버튼을 누르면 위처럼 나오게 간단하게 form을 만들어 주고 취소버튼을 누르면 onToggle( ) 메소드를 호출해 다시 원레 트윗 화면을 띄워준다.

 

  <>
      {Toggle ? (
        <div>
          <h4>{GweetObj.text}</h4>
          {isOwner && (
            <>
              <button onClick={onDelete}>삭제</button>
              <button onClick={onToggle}>수정</button>
            </>
          )}
        </div>
      ) : (
        <>
          <form onSubmit={onSubmit}>
            <input type="text" onChange={onChange} required />
            <input type="submit" value="수정" />
          </form>
          <button onClick={onToggle}>취소</button>
        </>
      )}
    </>

 

그리고 form에 onSubmit( )함수를 만들어 넣어주고 그 함수의 로직은 다음과 같다.

 

Delete 때 와 별 차이는 없다. NewGweet state를 만들어 이전 text값을 초기값으로 넣어주고 

onChnage( )함수에서 input 값이 바뀌면 setNewGweet(e.target.value)해준다.

그리고 onSubmit( )에선 delete 때 처럼 컬렉션/유저아이디 접근 후 update( ) 메소드를 호출 그 뒤 객체값을 수정 해주면 된다.

의문은 불변성을 지켜주지 않아도 되나? 이다. 누가보면 댓글좀... ㅠㅠ

 

    const [NewGweet, setNewGweet] = useState(GweetObj.text);
  
  const onChange = (e) => {
    setNewGweet(e.target.value);
  };
  
  const onSubmit = async (e) => {
    await dbService.doc(`gweets/${GweetObj.id}`).update({
      text: NewGweet,
    });
    e.preventDefault();
    setToggle(!Toggle);
  };