질문이 있습니다~

풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)

메시지 수정, 삭제 기능 구현

해결된 질문

작성

182

안녕하세요 선생님! 질문 드릴게 있습니다.

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

어떤 부분이 문제인지 알고싶습니다!

react graphql rest-api

답변 2

정재남

지식공유자

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

뭘 어떻게 하고 싶으신건지 의도를 정확히 설명해주시면 더 나은 답변을 드릴 수 있을 것 같아요.

bj2525

질문자

해결했습니다 선생님! 늦은 시간까지 질문 받아주셔서 감사합니다

정재남

지식공유자

4번줄에서는 원본 메시지들(msgs) 중에서 targetIndex에 해당하는 메시지 하나의 값을 바꾼
"수정된 메시지들(msgs)이 `updateMsg` 변수에 담기게 됩니다.

즉 변수명을 `updateMsg`라고 지으셨지만 실제로는 메시지 전체 배열이 담깁니다.

그상태에서 [전체메시지 배열, 메시지펼침] 이라고 세팅을 하면
[ [msg1, msg2, msg3 ...], msg1, msg2, msg3, ... ]
형태가 되겠죠.

deleteMsg도 마찬가지입니다.

4번줄에서는 원본 메시지들(msgs) 중에서 targetIndex에 해당하는 메시지 하나의 값을 바꾸어서
원본 메시지들(msgs)에 저장하고, 새로 변경된 값이 updateMsg 변수에 담기게 됩니다.

그 상태에서 [수정된 메시지, ...수정사항이 반영된 원본메시지들] 라고 하면
수정된 메시지가 제일 처음에 오게 되고, 그 뒤로는 '변경사항이 반영된' 원본메시지들이 죽 나열되겠죠.

deleteMsg도 마찬가지입니다.

bj2525

질문자

updateMsg가 전체 배열이 담긴다고 말씀하셨는데요! console을 찍어보니 targetIndex에 대한 부분만 담기고 있는데.. 제가 잘못 이해하고 있는걸까요..? 만약에 전체 배열이 아닌 그 해당하는 부분만 담고 싶으면 어떻게 해야하는걸까요,,

인프런 커뮤니티 질문&답변

질문이 있습니다~