질문이 있습니다~

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

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

해결된 질문

22.04.05 23:59 작성

172

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

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

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

react graphql rest-api

답변 2

정재남

지식공유자

2022. 04. 06. 01:53

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

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

bj2525

질문자

2022. 04. 07. 11:10

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

정재남

지식공유자

2022. 04. 06. 00:21

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

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

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

deleteMsg도 마찬가지입니다.

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

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

deleteMsg도 마찬가지입니다.

bj2525

질문자

2022. 04. 06. 01:15

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

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

질문이 있습니다~