질문 입니다.

Question

안녕하세요 제로초님 질문1. const onSubmitForm = useCallback ( ( e ) => { e . preventDefault (); // console.log(chat); if ( chat ?. trim () && chatData ) { const savedChat = chat ; mutateChat (( prevChatData ) => { prevChatData ?.[ 0 ]. unshift ({ id : ( chatData [ 0 ][ 0 ]?. id || 0 ) + 1 , content : savedChat , SenderId : myData . id , Sender : myData , ReceiverId : userData . id , Receiver : userData , createdAt : new Date (), }); return prevChatData ; }, false ). then (() => { setChat ( '' ); scrollbarRef . current ?. scrollToBottom (); }); axios . post ( `/api/workspaces/ ${ workspace } /dms/ ${ id } /chats` , { content : chat , }) . then (() => { revalidate (); }) . catch ( console . error ); } }, [ chat , chatData , myData , userData , workspace , id ], ); DirecMessage에서 메시지를 보내면 onSubmitform이 실행되잖아요? 그러면 mutateChat으로 인해 옵티미스틱 ui가 되는데 이 원리가 궁금합니다 분명 디엠데이터는 Chatdata를 props로 chat컴포넌트에 넘겨준다음 result에 표시되어 렌더링 되는거잖아요?. 그런데 chat컴포넌트에 mutateChat를 넣어준곳도 없는데 어떻게 mutatechate를 인식해서 result로 보여지는지 궁금합니다. 질문2. 강의에서 제로초님이 옵티미스틱 ui가 실패했을 때(좋아요먼저 띄어주고 요청을 나중에 보냈는데 점검때 실패했을 경우 얼른 하트를 꺼버림 ) 경우 얼른? 다시 원상태로 돌아와야 한다고 제가 이해했는데요 mutatechate에서 axios . post ( `/api/workspaces/ ${ workspace } /dms/ ${ id } /chats` , { content : chat , }) . then (() => { revalidate (); }) 이요청이 실패했을 경우 이미 렌더링 되어있는 디엠 데이터가 (얼른) 사라지지 않고 새로고침을 해야 사라지더라구요? 이렇게 작동하는게 맞나요?

제로초(조현영) · Answer

1. mutateChat을 하면 chat 데이터가 변경되고, 이를 사용하는 컴포넌트와 자식 컴포넌트는 모두 리렌더링됩니다. 이 때 리스트와 챗도 리렌더링되는것이죠. 2. catch 부분에서 revalidate를 하거나, 에러가 났던 채팅만 롤백해야합니다(추가 로직 구현 필요)