개발일지 5~11일차

issue: 리액트 객체 화면 출력 불가

이 오류는 보통 React에서 발생하는데, React는 JSX나 JSX를 반환하는 함수를 통해 컴포넌트를 렌더링해야 합니다. JavaScript 객체를 직접적으로 렌더링하는 것은 지원하지 않습니다.

구체적으로 "Objects are not valid as a React child (found: object with keys {content})"라는 오류 메시지는 { content }와 같은 객체를 직접적으로 자식 컴포넌트로 전달하려고 시도했을 때 발생합니다.

const handleClovaSummary = async () => {
   try {
      const summarized = await summary(id, { title: board.title, content: board.content });
      console.log("요약 중: ", summarized);
      setSummarizedBoard({ content: summarized});
   } catch (error) {
      console.error("요약 중 오류 발생:", error);
   }
};

{summarizedBoard && (
   <div className="summary-content"  id="result">
      <div className="summary-state">요약 완료</div>
      {summarizedBoard}
   </div>
)}

{summarizedBoard && (
   <div className="summary-content"  id="result">
       <div className="summary-state">요약 완료</div>
       {summarizedBoard.content}
   </div>
)}