다이어리 데이터 조회

데이터를 어떻게 불러 올것인가

1. page.tsx를 클라이언트 컴포넌트로 설정해서 데이터를 불러 온다

- 아닌거 같다 그렇게 되면 SSG를 제대로 활용 하지 못하고 nextjs를 사용 하는 이점이 사라진다

2. page.tsx안에 클라이언트 컴포넌트로 props를 전달 해본다

- 가능 할거 같다 데이터를 클라이언트 컴포넌트로 전달하고 

클라이언트 컴포넌트에서 리코일도 사용 하고 😀

 

export default async function Page() {
  const fetchData:DataType[] =  (await fetchDiaryData()) ?? [];
  return (
    <>
      <div>
        <h3>일기</h3>
        <Link href="/main/diary/write">작성</Link>
      </div>
      <DiaryDataList fetchData={fetchData} />
    </>
  );
}

 

'use client'

import { DataType } from "@/lib/typs"
import { useEffect, useState } from "react"


export default function DiaryDataList({fetchData} : {fetchData:DataType[]}){
    const [data, setData] =  useState<DataType[]>([]);

    useEffect(()=>{
        setData(fetchData)
    },[])
    
    return(<div>
        <ul>
            {data.map((item)=> {return(<li key={item.id}>{item.content}</li>)})}
        </ul>
    </div>)
}

전달 받은 props 타입 연동하고 

이렇게 데이터를 불러 옴!!