질문이 있습니다~

Question

안녕하세요 선생님! 질문 드릴게 있습니다.   처음부터 setState에서 로직을 처리하는게 아닌 아래와 같이 onUpdate 함수에서 msgs를 splice를 하여 updateMsg에 할당해주고 setMsgs((msgs) => [updateMsg, ...msgs]) 수정된 updateMsg를 바꾸어주고 기존의 존재했던 state값을 스프레드 연산자로 코드를 작성하였습니다! 해당 리스트가 삭제되긴 하지만 msgItem이 계속 쌓이고 있는 부분이 있습니다. 어떤 부분이 문제인지 알고싶습니다!

정재남 · Answer

제가 반환값을 잘못 말씀드렸네요.
말씀하신대로 targetIndex 부분만 변수에 담기는게 맞습니다.
그런데 원본인 msgs를 출력해보시면, splice 명령에 의해 변경사항이 반영된 결과가 출력될 겁니다.
splice 명령이 원본 배열을 변경하는 메소드라서 그런건데요,
(https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/splice)

정재남 · Answer

4번줄에서는 원본 메시지들(msgs) 중에서 targetIndex에 해당하는 메시지 하나의 값을 바꾼 "수정된 메시지들(msgs)이 `updateMsg` 변수에 담기게 됩니다. 즉 변수명을 `updateMsg`라고 지으셨지만 실제로는 메시지 전체 배열이 담깁니다. 그상태에서 [전체메시지 배열, 메시지펼침] 이라고 세팅을 하면 [ [msg1, msg2, msg3 ...],  msg1, msg2, msg3, ... ] 형태가 되겠죠. deleteMsg도 마찬가지입니다. 4번줄에서는 원본 메시지들(msgs) 중에서 targetIndex에 해당하는 메시지 하나의 값을 바꾸어서 원본 메시지들(msgs)에 저장하고, 새로 변경된 값이 updateMsg 변수에 담기게 됩니다. 그 상태에서 [수정된 메시지, ...수정사항이 반영된 원본메시지들] 라고 하면 수정된 메시지가 제일 처음에 오게 되고, 그 뒤로는 '변경사항이 반영된' 원본메시지들이 죽 나열되겠죠. deleteMsg도 마찬가지입니다.