App Router의 Server Component에서 Client Component로 Props를 전달할 때 발생할 수 있는 직렬화(Serialization) 에러의 원인은 무엇인가요?

App Router에서 Server Component에서 Client Component로 Props를 전달할 때 직렬화 에러가 발생하는 주된 이유는 서버에서 클라이언트로 데이터를 전송할 때 JSON 형태로 직렬화되기 때문입니다.

JSON은 JavaScript의 모든 데이터 타입을 지원하지 않습니다. 특히 함수(Function)나 Date 객체, Symbol과 같은 JavaScript 고유의 타입은 JSON으로 변환할 수 없습니다.

따라서 Server Component에서 이러한 타입의 데이터를 Props로 Client Component에 넘기려고 하면 직렬화 과정에서 에러가 발생합니다. 해결책으로는 이러한 데이터를 문자열이나 숫자와 같이 JSON으로 표현 가능한 형태로 변환하여 Props로 전달하는 방법이 있습니다. 예를 들어 Date 객체는 toISOString() 메서드를 사용하여 문자열로 변환할 수 있습니다.