제목: Next.js에서 “함수는 직접적으로 Client Components에 전달될 수 없음” 오류를 해결하는 방법
소개
Next.js를 사용하는 도중에 “함수는 ‘use server’로 표시하여 명시적으로 노출시킬 때까지 직접적으로 Client Components에 전달할 수 없습니다”라는 오류 메시지가 나타났나요? 걱정하지 마세요, 당신은 혼자가 아닙니다. 이 기사에서는 이 오류 메시지를 자세히 살펴보고 해결 방법을 제공할 것입니다.
오류 메시지 이해하기
“함수는 ‘use server’로 표시하여 명시적으로 노출시킬 때까지 직접적으로 Client Components에 전달할 수 없습니다”라는 오류 메시지는 일반적으로 Next.js에서 함수를 prop으로 Client Components에 전달할 때 발생합니다. Next.js는 기본적으로 보안 문제로 인해 함수를 직접적으로 Client Components에 전달하는 것을 허용하지 않습니다. 대신, 해당 함수를 명시적으로 ‘use server’ 지시어로 표시하여 노출시켜야 합니다.
‘use server’ 지시어를 사용하여 함수 노출하기
Next.js에서 함수를 노출하고 오류를 수정하기 위해 ‘use server’ 지시어를 사용할 수 있습니다. 이 지시어는 서버 액션(server actions)이라고 불리는 Next.js의 새로운 기능으로, 서버에서 클라이언트 컴포넌트로 비동기 함수를 전달하면서 클라이언트에서 호출할 수 있게 합니다.
‘use server’ 지시어를 사용하는 예시입니다:
"use server";
import { ClientComponent } from './ClientComponent.tsx';
async function deleteItem(itemId: string) {
// 함수를 'use server'로 표시하여 서버 액션으로 지정합니다
"use server";
// 할일: 아이템 삭제 로직 추가
return null;
}
export function Page() {
return <ClientComponent deleteItem={deleteItem} />;
}
클라이언트 컴포넌트의 prop으로 전달되는 함수에 ‘use server’ 지시어를 사용하여 명시적으로 노출시킴으로써 오류를 해결할 수 있습니다.
추가적인 고려 사항
에러.(jsx|tsx) 파일에서 이 오류가 발생한 경우, 해당 에러 파일을 클라이언트 컴포넌트로 지정해야 합니다. 이를 위해 에러 파일의 맨 위에 “use client” 지시어를 추가하면 됩니다. 이렇게 하면 에러 파일이 클라이언트 사이드 컴포넌트로 처리됩니다.
‘use server’와 ‘use client’ 지시어는 Next.js에 특정한 것이며, 다른 프레임워크나 라이브러리에는 적용되지 않을 수 있습니다. 이러한 지시어는 Next.js 애플리케이션의 클라이언트-서버 상호작용의 보안과 성능을 강화하기 위해 설계되었습니다.
결론
Next.js는 서버 사이드 렌더링 React 애플리케이션을 구축하는 강력한 프레임워크입니다. 때로는 “함수는 ‘use server’로 표시하여 명시적으로 노출시킬 때까지 직접적으로 Client Components에 전달할 수 없습니다”와 같은 오류가 발생할 수 있습니다. 이 오류의 원인을 이해하고 ‘use server’ 지시어를 사용함으로써 이 문제를 해결하고 Next.js 애플리케이션의 원활한 작동을 보장할 수 있습니다.
항상 클라이언트 컴포넌트에서 함수를 prop으로 전달할 때 주의하고 보안과 성능에 대한 모범 사례를 준수하는 것을 기억하시기 바랍니다.
참고 자료 :
같은 카테고리의 다른 글 보기 :
