TIL 40. React - redux thunk + firebase

지금까지 Redux -> Redux toolkit -> Redux thunk을 배워왔다.
그 사이사이 firebase를 이용했고, 이번 프로젝트에서는 모든 걸 총집합시켜서 진행했다.

이번 포스팅은 댓글 기능을 구현하면서 리마인드를 위해 작성한다.

---

const onSubmitComment = (event) => {
    event.preventDefault();
    dispatch(addComment({ postId, comment }));
  };

export const addComment = createAsyncThunk(
  'addComment',
  async ({ postId, comment }) => {
    const commentData = {
      createAt: Date.now(),
      creator: 'kim',
      body: comment,
      displayName: authService.currentUser.displayName,
      photoURL: authService.currentUser.photoURL,
    };
    await addDoc(collection(dbService, `posts/${postId}/comment`), commentData);
    return commentData;
  }
);

여러개의 데이터를 주고 받을 때는 { postId, comment } 처럼중괄호 안에 넣어서 주고 받아야 한다.

---

{userUID === authService?.currentUser?.uid ? (
	<div>
		<Button onClick={onClickToggle}>{toggle ? '취소' : '수정'}</Button>
		<Button onClick={deleteClickComment}>삭제</Button>
    </div>
) : null}

userUID(댓글 작성자)의 값과 authService.currentUser.uid(현재 로그인 사용자)의 값이 같으면 수정, 삭제 버튼을 보여주고 아니라면 보여주지 않는다.
근데, 옵셔널 체이닝을 사용하지 않는다면, %% 또는 ||을 사용해야하기 때문에 코드가 길어진다.
옵셔널 체이닝은 ?.을 기준으로 왼쪽 값을 평가하고,
null이나 undefind라면 평가를 멈추고 null 이나 undefind를 반환하며 버튼은 보이지 않을 것이다.
평가를 멈추지 않는다면 userUID와 authService.currentUser.uid을 비교하게 되고,
같다면 버튼을 보여주고 다르다면 보여주지 않을 것이다.