[Next js] server Component에서 client Component로 변수를 보낼 때 주의사항 (에러: Warning: Only plain objects can be passed to Client Components from Server Components. Objects with toJSON methods are not supported. Convert it manually to ..

웹 페이지의 성능을 위해서

server component와 client component를 함께 사용하는 경우가 많다.

server component에서 client component로 변수를 전달할 때

발생하는 에러이다.

Warning: Only plain objects can be passed to Client Components from Server Components. Objects with toJSON methods are not supported. Convert it manually to a simple value before passing it to props.

 

이 에러는 전달하는 props가 복잡한 object일 때 발생했다.

(나의 경우에는)

 

해결하는 방법은 간단하다.

object였던 변수를 string으로 바꾼 후 전달하자.

// server component (부모)

import { connectDB } from "@/util/database";
import Link from "next/link";
import ListItem from "./ListItem";

export default function List() {
  const client = await connectDB;
  const db = client.db("forum");
  const result = await db.collection("post").find().toArray();
  // 여기서 result에는 _id가 ObjectId라는 오브젝트였다.
  // 그래서 각 _id를 모두 string으로 만들어줬다.
  result.map((a) => {
    a._id = a._id.toString();
  })

  return (
    <div>
      <ListItem result={result} /> // props으로 전달한다.
    </div>
  );
}



// client component (자식)

export default function ListItem(props) {
  let result = props.result;
  // 받아서 잘 사용하면 된다.
  return (
    <div>
      잘 사용해보자
      {result._id}
      이런 식으로
    </div>
  );
}