게시물 삭제 시 동작하는 "e.target.parentElement" 코드에 관하여

추가적으로 해당 코드(e.target.parentElement. ... .opacity="0"; ... .display="none";)와 관련한 버그가 발생합니다

================================================
게시물이 3개 존재한다고 가정할 때
2번 게시물을 삭제하고 다크 모드로 변경하면
1번 또는 3번 게시물의 opacity=0, display=none 설정이 적용되어
마치 사라진 거 처럼 동작하는 버그

강의에서 배운대로 게시물 삭제와 똑같이
댓글 삭제 기능을 구현했는데 임의의 댓글을 삭제하면
삭제하지 않은 댓글에 opacity=0, display=none 설정이 적용되는 버그 등
================================================

공통적으로 e.target.parentElement. ... .style.opacity = "0"; ... .display="none"; <-- 이 css 설정이 자꾸 엄한 놈한테 적용되네요
원인을 도저히 모르겠습니다
도움 주시면 감사하겠습니다


+ 사진으로 설명 추가합니다

그러네요
postItem이라는 id가 여러개있어서
document.getElementById("postItem").style. 이렇게 접근하면 안되는게 맞는거 같습니다

해결 방안으로는 각 postItem 마다 id를 다르게 지정하는 방법이 있겠네요
그래서 요소의 id값을 postItem의 _id 값으로 지정했습니다

그렇게 하면 
document.getElementById(object._id).style.opacity = 0; 또는
$(`#${object._id}`).css("opacity", "0");

이런식으로 가독성 있게 코드를 효율적으로 바꿀 수 있네요.
삭제 시 스타일 적용도 문제없이 잘 됩니다

=================================

하지만,,,
위에서 언급했던
삭제하지 않은 게시글/댓글에 opacity=0, display=none 설정이 적용되는 문제는 그대로입니다.
** 정확히는 임의의 게시글 삭제 후 다크 모드로 변경한다던가 댓글 삭제 후 다른 댓글을 수정한다던가 하면
삭제된 요소가 가지고 있던 opacity=0, display=none 스타일이
삭제하지 않았던 요소(=삭제한 요소의 다음 요소)에 그대로 적용됩니다 **
id값으로 참조하여 css 스타일을 적용했는데도 이런 문제가 발생하네요 참눼

반복문에 key={}는 잘 넣었는데 이렇게 넣는게 맞나요?

CommentItem 컴포넌트 인자로 전달만 하고 사용은 안합니다
근데 CommentItem 컴포넌트에서 key 값 찍어보면 undefind 나오긴 하던데

이 문제가 아니라면 유일한 원인은 제 코드의 구조 때문일 거 같다는 생각이 듭니다
다크모드로 변경하거나 다른 댓글을 수정하면 게시글/댓글의 list data를 서버로부터 다시 받아오는데
이 때 삭제된 요소의 다음 요소가 스타일을 그대로 물려받는 현상 같습니다
왜 이렇게 동작하는지는 정말 모르겠네요
좋은 해결 방법이 있을까요?

에니메이션 효과를 포기하면 편해지지만 자존심이 허락하지 않습니다

잠도 안자고 머리꽁꽁싸매고 이거 해결하려고 노력중입니다

그 사이 많은 걸 깨닫고 알게됐는데
문제의 원인 중 일부는 깨달았는데 아직도 왜 그렇게 동작하는지 모르겠는 것도 있고
또 위에서 질문 내용 자체가 잘못된 것도 좀 있어서 새롭게 질문하려고 합니다



"삭제할 게시물"을 삭제해볼게요

삭제 시 동작하는 코드에요



삭제 이후 개발자도구의 Elements 탭을 보니 잘 동작했쥬?

이제 다크 모드 버튼을 눌러 다크 모드로 변경해볼게요



이때 버그가 발생합니다
"삭제할 게시물"이 아예 없어지고 삭제한 게시물에 적용됐던 css가 그 다음 게시물인 "삭제하지 않을 게시물"에 그대로 적용됩니다

다크모드 변경할 때 router.refresh() 코드가 실행되서
서버가 게시물 리스트를 다시 db로부터 받아오는데
어쨋든 이때 왜 삭제한 게시물에 적용됐던 css가 다음 게시물로 전이되는 건가요???

하루에도 수많은 질문에 답하느라 바쁘고 힘드실텐데
매번 감사함니다

해결했습니다

결론부터 말하자면 원인은 map 함수를 통해 각 post 또는 comment를 호출할 때 key 값에 index를 넣었기 때문입니다


"인덱스를 key로 사용 중 배열이 재배열되면 컴포넌트의 state와 관련된 문제가 발생할 수 있습니다. 컴포넌트 인스턴스는 key를 기반으로 갱신되고 재사용됩니다. 인덱스를 key로 사용하면, 항목의 순서가 바뀌었을 때 key 또한 바뀔 것입니다. 그 결과로, 컴포넌트의 state가 엉망이 되거나 의도하지 않은 방식으로 바뀔 수도 있습니다."
라고 하더군요

key 값에 고유한 값인 id를 넣었더니 감쪽같이 해결됐습니다


저희 둘 다 key값으로 index를 사용했는데 슨생님은 되고 저는 안 됐던 이유는
저는 item을 컴포넌트화하여 사용했기 때문입니다
혹시 저와 같이 컴포넌트화하여 코드 작성하신 분들은 참고하면 좋겠습니다

===========================================

정확한 원인을 파악하기까지 삽질을 수심 50000km 정도까지 했습니다 쉽지 않았습니다
결국 슨생님께서 처음에 반복문에 key={} 잘 넣어보라고 했던게 정답이었네요
덕분에 해결할 수 있었습니다 감사함니다
오늘 드디어 잘 수 있습니다