코드에서 궁금한게 있습니다.

<>{content}</> 로 쓰면 에러가 안나고

{content} 로쓰면 에러가 나는 이유가 뭘까요 ???

 작성자 : {id} | 감정 : {emotion}

<div className="content">
        {isEdit ? (
          <textarea
            value={localContent}
            onChange={(e) => setLocalContent(e.target.value)}
          />
        ) : (
          <>{content}</>
        )}
      </div>

여기서 강의 보면 id,emotion는 <></>을 안쓰는데 content를 쓰는 이유가 뭔지 모르겠습니다. 어차피

const DiaryItem = ({
  onEdit,
  onDelete,
  author,
  content,
  emotion,
  create_date,
  id,
}) => {

전부 List로 부터 받아오는데 누군 <>{content}</>이고 누군 그냥 {id} {emotion}인 이유가 먼지 궁금해요

그리고

data.filter((it)=>(it.id!==targetId)); 을

data.filter((it)=>{it.id!==targetId}); 로 바꾸면 왜 에러가 나는걸까요 ?? ?

언제 괄호를 쓰고 언제 중괄호를 써야하는지 정확히 알수있을까요 ???

아래는 전체 코드입니다.

import { useRef, useState } from "react";
const DiaryItem = ({
  onEdit,
  onDelete,
  author,
  content,
  emotion,
  create_date,
  id,
}) => {
  const [isEdit, setIsEdit] = useState(false);
  const toggleIsEdit = () => setIsEdit(!isEdit);
  const [localContent, setLocalContent] = useState(content);

  const handleDelete = () => {
    console.log(id);
    if (window.confirm(`${id}번쨰 일기를 삭제하겠습니까?`)) {
      onDelete(id);
    }
  };
  const handleQuiteEdit = () => {
    setIsEdit(false);
    setLocalContent(content);
  };

  const handleEdit = () => {
    onEdit(id, localContent);
  };

  return (
    <div className="DiaryItem">
      <div className="info">
        <span className="author_info">
          작성자 : <>{id}</> | 감정 : <>{emotion}</>
        </span>
        <br />
        <span className="date">날짜: {create_date}</span>
      </div>
      <div className="content">
        {isEdit ? (
          <textarea
            value={localContent}
            onChange={(e) => setLocalContent(e.target.value)}
          />
        ) : (
          <>{content}</>
        )}
      </div>
      {isEdit ? (
        <>
          <button onClick={handleQuiteEdit}>수정취소</button>
          <button onClick={handleEdit}>수정완료</button>
        </>
      ) : (
        <>
          <button onClick={handleDelete}>삭제하기</button>
          <button onClick={toggleIsEdit}>수정하기</button>
        </>
      )}
    </div>
  );
};
export default DiaryItem;