Objects are not valid as a React child 에러 해결하기

Unhandled Runtime Error
Error: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead.

에러가 난 원인의 코드

onst TalkItem = (title, desc) => {
  return (
    <>
      <div className="TalkItem">
        <div className="itemContent">
          <div>
            <h1>{title}이런 문제는 어떻게 해결하나요?</h1>
            <span>10분 전</span>
          </div>

          <p>
            {desc}강의 보고 제대로 따라했는데 이런 에러가 납니다. 어떻게
            해결하는지 도움 부탁드립니다.
            
            (...이하 생략)

이렇게 코딩 했을 경우, 위에 같은 에러가 발생했다. 이를 처리 해 주는 방법은 정말 간단하다. props를 받을 때 { } 중괄호를 삽입해주면 된다.

에러코드 해결

const TalkItem = ({title, desc }) => {
  return (
    <>
      <div className="TalkItem">
        <div className="itemContent">
          <div>
            <h1>{title}이런 문제는 어떻게 해결하나요?</h1>
            <span>10분 전</span>
          </div>

          <p>
            {desc}강의 보고 제대로 따라했는데 이런 에러가 납니다. 어떻게
            해결하는지 도움 부탁드립니다.
          </p>
          
          (...이하 생략)

그리고 props를 넘겨줄 때 props의 타입을 정의해주어야 한다.

import PropTypes from "prop-types";

prop-types 라이브러리 설치한 후 상단에 import 시켜준다. 그 후에 하단에 타입을 정의해주면 된다. (타입스크립트를 사용하면 이런 타입들을 굳이 정의 해주지 않아도 된다)

하단에는 이렇게 prop 관련 된 타입을 정의해주었다.

TalkItem.propTypes = {
  title: PropTypes.string,
  desc: PropTypes.string,
};