next.js에서 비동기적으로 데이터 가져오기 fetching Data

next.js에서 fetchData를 하는 방법

라우팅 경로를 정한다.

나는 /users로 정했고 user들의 정보를 가져올 것이기 때문에
users라는 폴더를 생성해서 그 안에 page.tsx만들어줌

그 후 app폴더와 같은 선상에 lib폴더(이건 자유일 듯.)를 만들어서 fetch data 함수를 적어준다

비동기적으로 데이터를 가져올 예정이므로 async function 으로 만들어주고 성공하면 res.json()을 반환하게 한다.

export default async function getAllUsers() {

    const res = await fetch('https://jsonplaceholder.typicode.com/users');

    if (!res.ok) throw new Error('데이터 패치를 실패했습니다.');

    return res.json();
}

page.tsx에서 fetch 함수를 불러온다.

import type { Metadata } from 'next'
import getAllUsers from '@/lib/getAllUsers'
export const metadata: Metadata = {
    title: "Users",
}

export default function UsersPage() {
    const usersData: Promise<> = getAllUsers()
    return (
        <>
            <h1>jhjhjh</h1>
        </>
    )
}

const usersData: Promise<> = getAllUsers()

이 코드는 next,js에서 데이터를 비동기적으로 가저요기 위해 사용된다.
getAllUsers 함수는 promise를 반환한다.

getAllUsers() 함수를 호출하여 비동기적으로 사용자 데이터를 가져와서, 해당 데이터가 Promise 객체에 담겨있음을 명시적으로 선언한 것.

여기서 <>는 타입 스크립트에서 제네릭 타입을 나타내는 문법이다.

제네릭 타입의 구체적 형태가 지정되지 않았으므로 빈 꺽쇠로 표현했지만, 실제 데이터 타입을 지정해주어야한다.

실제 데이터 타입을 지정하기

types.d.ts 파일을 만들어 데이터(User)의 타입을 지정해준다

type User = {
    "id": number,
    "name": String,
    "username": String,
    "email": String,
    "address": {
        "street": string,
        "suite": string,
        "city": string,
        "zipcode": string,
        "geo": {
            "lat": string,
            "lng": string
        }
    },
    "phone": string,
    "website": string,
    "company": {
        "name": string,
        "catchPhrase": string,
        "bs": string
    }
}

page.tsx로 가서

const usersData: Promise<User[]> = getAllUsers(); 로 바꿔준다.

모든 유저들을 불러오는 것이므로 User[]
한명의 데이터를 불러오는 경우에는 User라고 해준다.

type.d.ts는 내보내기하거나 불러올 필요가 없씀

users폴더의 경로에 따라 페이지가 잘 생성됨!
유저정보도 잘 받아오고 있다.