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

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

Next.js와 React Query의 버전 업데이트에 따라 서버 액션(Server Actions)에 폼 데이터를 전달하면서 발생하는 문제에 대해 설명해 드리겠습니다. 문제가 된 에러는 “서버 액션에는 클래스를 사용할 수 없고, 평범한 오브젝트만 전달해야 한다”는 것으로 보입니다.

문제 원인 및 해결 방법

서버 액션에 폼 데이터를 전달할 때, 최신 버전에서 클래스 객체를 사용할 수 없게 되어 이와 같은 타입의 데이터를 전달할 때는 plain(평범한) JavaScript 객체를 사용해야 합니다. 다음은 문제 해결을 위한 몇 가지 방법입니다:

1. Plain Object로 변환:
   
   • 폼 데이터는 일반적으로 FormData 클래스로 구성되므로, 이를 평범한 객체로 변환한 다음 데이터를 전달해야 합니다.
     
   • FormData를 평범한 객체로 변환할 수 있는 방법은 다음과 같습니다:
     

   const formData = new FormData(formElement);
   const plainObject = Object.fromEntries(formData.entries());

이 방식으로 변환된 plainObject를 서버 액션에 전달하면 문제를 해결할 수 있습니다.

2. API 요청 수정:
   
   • 서버 액션을 사용하는 대신, Next.js API Route를 사용하는 방법도 고려해 볼 수 있습니다. 이를 통해 좀 더 유연하게 요청을 처리하고 응답을 받을 수 있습니다.
     

추가적인 참고 자료

아래에서 유사한 문제를 다룬 게시물을 참조하여 더 많은 정보를 얻을 수 있습니다:

• Next.js 및 React 최신 업데이트에 대응하는 방법
  

이 링크에서는 Next.js와 관련된 다양한 문제 해결 방법들을 다룹니다. 구체적인 코드와 함께 설명이 되어 있으니 참고해주세요.

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