useOptimistic 훅

export default function PostRead() {
  const [comments, setComments] = useState(post.comments);
  const [optimisticComments, addOptimisticComments] = useOptimistic<Comment[], Comment>(
    comments,
    (comment, value) => [...comment, value]
  );

  return (
    <div>
      <CommentForm addOptimisticComments={addOptimisticComments} setComments={setComments}>
			
      <div>
        {optimisticComments &&
          optimisticComments.map((comment) => <CommentComponent key={comment._id} {...comment} />)} // 필요한 것만 꺼내 써도 됨. CommentComponent({_id, author, content} : Comment) 이후에 props 더 받아서 타입 더 적어야 하면 Comment & {deleteComment: ()=>void} 이렇게 적어주면 됨
      </div>
    </div>
  )
}

useOptimistic 훅

useOptimistic훅은 낙관적 업데이트를 할 때 사용된다.
첫번째 매개변수로 초기값을 받고, 두번째 매개변수로 실제로 낙관적 업데이트가 수행하게 될 함수를 전달 받는다.

• 낙관적 업데이트는 매개변수로 현재의 상태값이 넘어오고, 낙관적 상태에서 전달할 매개변수 값이 넘어오는데, 그걸 가지고 낙관적 업데이트를 수행하는 함수를 작성해주면 된다.
  
  

addOptimisticComments라는 낙관적 업데이트를 실행할 수 있는 함수를 게시글 등록하는 쪽으로 넘긴다.
낙관적 업데이트가 끝나면 setComments로 원본 데이터를 수정해줘야 하기 때문에 setComments도 같이 넘긴다.
addOptimisticComments 타입은 타입추론 통해서 타입 복붙.

타입 <TState, TValue>

useOptimistic의 타입은 <TState, TValue> 이렇게 적어주면 되는데.

• TState : 전체 상태의 타입을 의미한다. ex. Comment[]
• TValue : 새롭게 추가될 값의 타입을 의미한다. ex. Comment
  
  

export default function CommentForm ({
  addOptimisticComments,
  setComments
}: {
  addOptimisticComments: (action: Comment) => void;
  setComments: Dispatch<SetStateAction<Comment[]>>; // Distpatch와 SetStateAction은 auto import 필요함
}) {
  const handleCommentAdd = async () => {
    addOptimisticComments({
      author: {
        _id: Date.now().toString().
        profileImage: user?.profileImage, // ?는 user가 없으면 자동으로 undefined 반환.
        nickname: user?.nickname,
      },
      content: text,
      _id: Date.now().toString(),
      createdAt: new Date().toISOString(),
    } as Comment); // as Comment로 타입 단언
  }
  try { 
    if (!text.trim()) return;
    const {data} = await axiosInstance.post('', {
      content: text,
    });
    setText("");
    startTransition(() => {
      setComments(comments => [...comments, data];
    });
  } catch (e) {}
  return (
	
  )
}

전달 받은 addOptimisticComments를 댓글을 등록할 때 사용한다.
addOptmisticComments에는 Comment타입에 맞게 더미 데이터들을 넣어주면 된다.
useOptimistic 훅은 댓글 등록이 실패됐을 때 자동 롤백이된다.