댓글 불러오기

'use client'

import { useState } from 'react';
import { useParams } from 'next/navigation';
import { useQuery } from '@tanstack/react-query';
import api from "@/util/api";

export default function ArticleDetail() {
    const params = useParams();

    const getArticle = async () => {
        return await api.get(`/articles/${params.id}`)
            .then((response) => response.data.data.article);
    }

    const { isLoading: articleLoading, error: articleError, data: articleData } = useQuery({
        queryKey: ['article'],
        queryFn: getArticle
    });

    if (articleError) {
        console.log(articleError);
    }

    if (articleLoading) {
        return <>Loading...</>;
    }

    if (articleData) {
        return (
            <>
                <h1>게시판 상세 {params.id}번</h1>
                <div>{articleData.subject}</div>
                <div>{articleData.content}</div>
                <div>{articleData.createdDate}</div>
                <div>{articleData.modifiedDate}</div>
                <AnswerCreate />
            </>
        );
    }
}

function AnswerCreate() {
    const params = useParams();
    const [answer, setAnswer] = useState({ content: '' });

    const getAnswers = async () => {
        // 댓글을 가져오는 비동기 함수 구현
    }

    const { isLoading: answerLoading, error: answerError, data: answerData } = useQuery({
        queryKey: ['answers'],
        queryFn: getAnswers
    });

    const handleSubmit = async (e) => {
        e.preventDefault();
        await api
            .post('/answers', answer)
            .then(function (response) {
                console.log(response);
            })
            .catch(function (error) {
                console.log(error);
            })
    };

    const handleChange = (e) => {
        const { name, value } = e.target;
        setAnswer({ ...answer, [name]: value });
    };

    if (answerError) {
        console.log(answerError);
    }

    return (
        <>
            <h3>글 등록</h3>
            <form onSubmit={handleSubmit}>
                <div>
                    <label>내용:</label>
                    <textarea name="content" value={answer.content} onChange={handleChange} />
                </div>
                <button type="submit">등록</button>
            </form>
            {/* 여기서 댓글을 표시하거나, 댓글을 표시할 컴포넌트를 추가하세요 */}
        </>
    );
}

여기까지가 댓글을 등록하면 데이터베이스에 들어간다.

import { useQuery } from '@tanstack/react-query';가 주요 가져오는 역할이라 한다.

response.data.data.answers는 백엔드에서 받아온 API 응답에서 댓글 데이터를 추출하는 부분입니다. 여기서 각각의 단어들을 해석해보겠습니다:

• response: API 요청에 대한 응답을 나타내는 객체입니다. 이 객체에는 요청한 데이터와 함께 응답 상태 코드, 헤더 등의 정보가 포함됩니다.

• data: 응답 데이터를 나타내는 속성입니다. 대부분의 API 요청에서 실제 데이터는 이 data 속성 안에 들어있습니다.

• data: 댓글 데이터를 나타내는 속성입니다. 이 속성 안에는 실제 댓글 데이터가 들어있습니다. 이름이 중복되어 보일 수 있지만, 백엔드에서는 주로 이런 식으로 데이터를 구조화하여 전달합니다.

• answers: 댓글 데이터를 포함하는 배열이나 객체입니다. 실제 댓글 데이터가 포함된 부분으로, 이 부분을 프론트엔드에서 활용하여 댓글을 표시하거나 다른 작업을 수행합니다.

따라서 response.data.data.answers는 백엔드에서 받아온 API 응답에서 댓글 데이터를 추출하는 코드입니다. 이 코드를 통해 프론트엔드에서 받은 댓글 데이터를 활용하여 UI에 표시하거나 다른 작업을 수행할 수 있습니다.