코인잼 업데이트 하기 -1부-

by


첫 번째

코인 상세페이지에서 댓글 기능 가능

import React, { useCallback, useEffect, useState } from 'react'
import { useSelector } from 'react-redux'
import { useParams } from 'react-router-dom'
import dayjs from 'dayjs'
import { addDoc, collection, getDocs, query, where } from 'firebase/firestore'
import { db } from '../../firebase'
import CommentBox from '../atom/CommentBox'
import CommentItem from '../molecules/comentItem'
import { selectUser } from '../../store/authStore'

const CoinComment = ({ coin }) => {
  const (value, setValue) = useState('')
  const (comments, setComments) = useState(())
  const user = useSelector(selectUser)
  const params = useParams()
  const saveComment = async (e) => {
    e.preventDefault()
    if (!user) {
      alert('로그인 필요')
      return
    }
    const newComment = {
      comment: value,
      createdAt: dayjs().format('YYYY-MM-DD'),
      coinId: params.coinId,
      like: 0,
      dislike: 0,
      creator: user,
    }
    const docRef = await addDoc(collection(db, 'comments'), newComment)
    setComments((...comments, { id: docRef.id, ...newComment }))
    setValue('')
  }
  const getComments = useCallback(async () => {
    const q = query(collection(db, 'comments'), where('coinId', '==', params.coinId))
    const querySnapshot = await getDocs(q)
    const commentData = querySnapshot.docs.map((doc) => ({ id: doc.id, ...doc.data() }))
    setComments(commentData)
  }, (params))
  useEffect(() => {
    getComments()
  }, (getComments, params.coinId))
  return (
    <div className="py-8 my-4 rounded-div">
      {comments.map((comment) => (
        <CommentItem key={comment.id} comment={comment} />
      ))}
      <CommentBox onSubmit={saveComment} value={value} onChange={(e) => setValue(e.target.value)} />
    </div>
  )
}

export default CoinComment

댓글의 주요 기능입니다.

1. useState 함수로 상태 값을 초기화합니다.

  • 값: 댓글 작성 양식에 입력한 값을 저장합니다.
  • 댓글: 현재 암호화폐와 관련된 모든 댓글을 저장합니다.

2. useSelector 후크를 사용하여 Redux 스토어에서 사용자 정보를 가져옵니다.

삼. useParams 후크를 사용하여 현재 페이지 URL에서 매개변수 값을 추출합니다.

4. saveComment 함수는 댓글 작성 양식이 제출되면 호출됩니다.

  • 사용자가 로그인하지 않은 경우 “로그인 필요” 알림이 표시되고 함수가 종료됩니다.
  • 새 댓글 개체를 만들어 Firebase Firestore 댓글 컬렉션에 추가합니다.
  • 추가된 댓글 개체를 댓글 상태에 추가합니다.
  • 값 상태를 초기화합니다.

5.getComments 함수는 코인에 대한 댓글 목록을 가져오는 데 사용됩니다.

useCallback 후크를 사용하여 getComments 함수를 선언합니다.

getComments 함수는 async 키워드를 사용하는 비동기 함수로 정의됩니다.

이 함수는 Firestore의 쿼리 메서드를 사용하여 현재 코인의 coinId 필드가 현재 암호화폐의 ID와 일치하는 Comments 컬렉션에서 모든 댓글을 검색하는 쿼리를 구성합니다.

그런 다음 getDocs 메서드를 사용하여 쿼리를 실행하고 querySnapshot 개체를 반환합니다.

querySnapshot 개체에는 docs 속성이 있으며 해당 컬렉션의 모든 문서를 포함하는 배열을 반환합니다.

이 배열을 사용하여 map 함수는 각 문서의 ID와 data() 를 사용하여 문서 데이터를 검색하는 데 사용됩니다. 이때 data() 함수는 문서의 데이터를 객체 형태로 반환합니다.

…doc.data() 구문을 사용하여 개체를 확장하고 ID가 있는 새 개체로 캐스팅합니다.

변환된 객체의 배열은 setComments 함수를 사용하여 주석 상태로 저장됩니다.

6. useEffect 후크를 사용하여 params.coinId 값이 변경될 때마다 getComments 함수를 호출합니다.

useCallback 후크를 사용하여 getComments 함수를 간소화하고 params 값이 변경될 때마다 새 함수를 만들지 않도록 합니다.

따라서 getComments 함수는 params.coinId의 값이 변경될 때마다 한 번만 생성한 후 이전에 생성한 함수를 사용합니다. 이렇게 함으로써 스토리지를 효율적으로 사용할 수 있습니다.

“coinId” 필드가 Firestore의 댓글 컬렉션에서 현재 암호화폐의 params.coinId와 일치하는 모든 문서를 검색하고 문서의 데이터 및 문서 ID를 배열로 변환하고 setComments 함수를 사용하여 댓글 상태를 업데이트합니다.

이 함수는 컴포넌트가 useEffect 후크에 의해 마운트될 때와 params.coinId가 변경될 때마다 실행됩니다.

useCallback hook으로 getComments 함수를 선언하면 params.coinId가 변경될 때마다 함수가 재생성되지 않고 이전에 생성된 함수를 계속 사용할 수 있습니다. 이렇게 하면 불필요한 함수 재생성이 방지됩니다!

두번째

가독성과 유지 관리를 위해 firebase.js에서 상수로 정의됩니다.

export const CollectionName = {
  USER: 'users',
  COMMENT: 'comments',
}

제삼

useSelector를 사용하면 코드 중복이 줄어들고 유지 관리가 쉬워집니다.