인프런 커뮤니티 질문&답변

안녕하세요 이정환입니다

두번째 사진으로 첨부해 주신 것 처럼 async 키워드를 붙인채로 강의 진행하시면 됩니다!

추가로 정확한 용어 정의가 필요할 것 같아요! 서스펜션->서스펜스가 정확한 용어입니다.

(서스펜션은 자동차의 ... 장치를 말합니다)

PS.

올바른 방향으로 실습 잘 진행하고 계시니 걱정하지 않으셔도 괜찮습니다!!

혹시 비슷한 고민이 또 생기시거나

버전관련해서 또 새로운 이슈가 있다면 얼마든지 질문 주세요 !!

Next 15버전 부터 cookies, headers, params, searchParams, draftMode 등이 비동기 API 화 되었습니다.

따라서 비동기 방식으로 코드를 처리해야 하며 따라서 함수에 async를 선언해줘야 합니다.

만약 일시적인 동기화 방식으로 처리하고자 한다면 아래 코드와 같이 React의 use() 사용해 보세요.

'use client';

import { use } from 'react';

export default function Page({ 
  searchParams 
}: { 
  searchParams: Promise<{ q?: string }> 
}) {
  const { q } = use(searchParams);

 //.... 생략
}

안녕하세요, 인프런 AI 인턴입니다. 상상님.

Next.js 15 버전 이후로 searchParams와 params는 비동기로 처리되며, Promise 타입을 사용하게 되었습니다. 관련하여 질문해주신 내용은 이러한 변화에 대한 적응 과정으로, 비동기 함수 내에서 서스펜션(Suspense)을 사용하는 방법과 관련이 있습니다.

핵심 개선점

1. Promise 타입 적용: Next.js 15에서는 searchParams와 같은 객체들이 비동기적으로 반환되므로, Promise 타입을 명시해야 합니다.
   
2. async/await 사용: searchParams의 값을 사용하기 위해서는 await를 통해 비동기 작업을 완료해야 하며, 이에 따라 함수는 async 키워드를 사용합니다.
   
3. 서스펜션 적용 여부: 서스펜스는 기본적으로 비동기 작업을 처리하는 데 사용되며, async 키워드 사용 자체는 서스펜스 적용에 직접적인 영향을 미치지 않습니다. 따라서, 이번 실습에서는 함수를 비동기 함수로 유지하면서 서스펜스를 적용해도 무방합니다.
   

제안된 코드 및 올바른 방향

// async를 유지한 상태로 구현
export default async function Page({ searchParams }: { searchParams: Promise<{ q?: string }> }) {
  const { q } = await searchParams;

  return <SearchResult q={q || ""} />;
}

이와 같은 방식으로 비동기성을 유지하며, 서스펜션을 사용해 데이터를 처리할 수 있습니다. 현재 질문자님의 방법은 Next.js의 최신 버전에 맞추어 적절히 적용되었으며, 실습의 방향 또한 잘 잡고 계신 것으로 보입니다.

관련하여 유사한 질문과 답변을 찾을 수 있습니다:
- Error: Route “/search” used searchParams.q. searchParams should be awaited before using its properties.: 비동기 API 사용 시 주의해야 할 점과 코드 수정 방법.

저는 질문자님의 이해를 돕고자, 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해 드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.