Payload 타입을 가져와 사용하는 방법

Payload는 Local API를 사용해서 데이터를 불러오면 타입을 같이 불러오기 때문에, 별도로 타입 지정이 필요가 없습니다. 하지만, Local API는 서버 컴포넌트에서만 작동하기 때문에 클라이언트 컴포넌트 요소가 필요한 경우 2가지 방법이 있습니다.

1. 서버 컴포넌트에서 데이터를 불러와서 클라이언트 컴포넌트로 전달
2. 별도의 API 라우터를 경유

이때, 서버 컴포넌트에서 클라이언트 컴포넌트로 데이터를 전달하면, 클라이언트 컴포넌트에서는 데이터 타입을 지정할 것을 요구합니다. 데이터 타입을 직접 지정해도 괜찮지만, 저는 Payload에서 글로벌이나 콜렉션을 만들면서 데이터 타입이 자동으로 생성되어 저장되기 때문에, 그 인터페이스를 불러와서 사용합니다.

payload generate:types를 이용하면 자동으로 프로젝트 루트 폴더에 payload-types.ts가 생성됩니다. 이 파일 경로를 바꿔서 사용하는 방법도 있지만, 저는 tsconfig.json의 paths에 등록해서 사용합니다.

    "paths": {
      "@/*": ["./src/*"],
      "@payload-config": ["./payload.config.ts"],
      "@payload-types": ["./payload-types.ts"]

그러면, import { Navigation } from "@payload-types"; 이런 형태로 타입을 불러와서 사용할 수 있습니다.