댓글을 불러오는 기능을 만들었다.
게시물 각각에 달리는 댓글들만 골라서 보여주는 로직이 살짝 복잡해서,
금방 해내지는 못했지만 어찌저찌 해결했다.
해결하면서 해당 로직에 대해 깊게 이해하는 계기가 되었다.
return (
<StCommentContainer>
<form onSubmit={onSubmitComment}>
<input type="text" />
<button type="submit">완료</button>
</form>
{globalComment.map((comment) => (
<Comment
key={comment.id}
id={comment.id}
body={comment.body}
creator={comment.creator}
/>
))}
</StCommentContainer>
);위 코드는 PostList.jsx의 return 부분이다.
return 부분 안에 Comment라는 컴포넌트를 map을 사용해서 Comment의 개수만큼 반복했다.
export const getComments = createAsyncThunk(
'getComments',
async (commentId) => {
const data = [];
const q = query(
collection(dbService, `posts/${commentId}/comment`),
orderBy('createAt', 'desc')
);
const docs = await getDocs(q);
docs.forEach((doc) => {
const commentData = {
id: doc.id,
...doc.data(),
};
data.push(commentData);
});
console.log('data : ', data);
return data;
}
);comment는 이렇게 받아온다. 각 게시물의 Id를 url로 이용해서 파이어베이스 DB에 접근하고, 해당 게시물의 데이터만 받아온다.
