Only plain objects can be passed to Client Components from Server Components

[정중식]

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.
  {_id: {}, title: "dtd", contents: "dtd"}
        ^^

라는 에러가 출력이되는데요, 이유를 모르겠어요.. 검색해서 알아보니 서버컴포넌트에서써야하는걸 클라이언트컴포넌트에서 쓰인거같다는데..

 result를 콘솔에찍어보면 이렇게 잘 나옵니다.
[
  { _id: '644a7c06c64d9d5dd45c4894', title: '글', contents: '수정' },
  { _id: '644d97f6e67700bdec2c9fe9', title: '123', contents: '1234' },
  { _id: '644d9965e67700bdec2c9fea', title: 'zz', contents: 'zss' },
  { _id: '644f6ef1b42665e052ae6fbc', title: '하이', contents: '입니다' },
  { _id: '644f6f2cb42665e052ae6fbd', title: '하이', contents: '입니다' },
  { _id: '644f6f5fb42665e052ae6fbe', title: '하이', contents: '입니다' },
  { _id: '644f776db42665e052ae6fbf', title: 'dtd', contents: 'dtd' }
]

원인이 뭐떄문일까요?

메인페이지입니다.

import { connectDB } from '@/util/database';
import Link from 'next/link';
import PostList from './postList';

const Home = async () => {
  let client = await connectDB;
  const db = client.db('fourm');
  let result = await db.collection('post').find().toArray();

  return (
    <div className='container'>
      <PostList result={result} />
    </div>
  );
};

export default Home;

postList.js 입니다.

'use client';

import Link from 'next/link';

const PostList = ({ result }) => {
  const onRemove = () => {
    fetch('/api/post/remove');
  };

  console.log(result);
  return (
    <>
      {result.map((data, i) => (
        <div className='list' key={data._id}>
          <div className='item'>
            <div className='emoticon-box'>
              <Link href={`/edit/${data._id}`}>✏️</Link>
              <span>❌</span>
            </div>
            <h4>
              <Link href={`/detail/${data._id}`}>
                <span>{data.title}</span>
              </Link>
            </h4>
            <p>{data.contents}</p>
          </div>
        </div>
      ))}
    </>
  );
};

export default PostList;

[codingapple]

_id를 보낼 땐 전부 뒤에 .toString() 붙여서 보내야합니다 워닝은 무시해도 됩니다

[CZM]

애플님 말대로 워닝이라 무시해도 되지만
만약 정 거슬리신다 싶으시면 list > page.js에

  {
    result.map((e) => {
      e._id = e._id.toString();
    });
  }

이런 식으로 추가해주면 워닝 안뜨긴해요..!
(제가 초보라 이게 올바른 해결법인지는 모르겠습니다.)

[글쓴이]

글