⚠️ Error 상황
댓글을 연속으로 등록하고, 수정버튼을 누르면 댓글입력창에 수정할 댓글 내용이 옮겨지지 않음.
에러 해결 전
// 에러 해결 전)
async function handleEditCommentBtn(commentId, content) {
//console.log("수정버튼클릭! ", commentId);
editingCommentId = commentId;
createOrEditCommentBtn.textContent = "댓글 수정";
//console.log(content);
commentTextArea.innerHTML = content;
}에러 해결 후
// 에러 해결 후)
async function handleEditCommentBtn(commentId, content) {
editingCommentId = commentId;
createOrEditCommentBtn.textContent = "댓글 수정";
commentTextArea.value = content; // >> 수정한 부분
}.commentContent{
padding-left: 46px;
font-size: 15px;
white-space: pre-wrap; /* 줄바꿈 문자 그대로 반영 */
}
에러 해결 과정
-
이벤트 리스너의 문제인가 싶어 이벤트리스너 함수 내부에 로그(
수정버튼클릭!)를 남겨 확인했다. 로그가 제대로 출력되는걸 보아 이벤트 리스너의 문제가 아닌 것을 확인했다. -
commentTextArea.innerHTML = content;에서content가 빈 값이라 아무것도 뜨지 않은건가 싶어 로그로content가 잘 전달되고 있는지 확인함. 그 결과, 제대로 출력되고 있었음.
-
화면을 동적으로 처리하는데 문제가 있는건가 싶어 chatGPT에게 물어봄.
>> ChatGPT에게 질문한 내용 handleEditCommentBtn 함수에서 `commentTextArea.innerHTML = content`를 해도 화면이 안바뀌고 있어. 아마 화면을 동적으로 처리하는데 문제가 있는것 같은데 이걸 해결하려면 어떻게 해야해? 참고로 `const commentTextArea = document.getElementById("writeCommentArea”);`
ChatGPT의 답변
commentTextArea.innerHTML = content;로 textarea 요소에 내용을 설정하려고 할 때, innerHTML이 제대로 동작하지 않는 이유는 textarea 요소의 특성에 있습니다. textarea에서는 innerHTML이 아니라 value를 사용하여 텍스트를 설정해야 합니다.
문제 원인:
textarea는 내부에 HTML 콘텐츠를 포함하는 것이 아니라 텍스트 값을 담고 있습니다.
innerHTML은 HTML 태그를 포함한 콘텐츠를 변경할 때 사용되지만, textarea에서는 텍스트만 설정해야 하므로 value 속성을 사용해야 합니다.
해결 방법:
textarea의 텍스트를 설정하려면 innerHTML 대신 value를 사용해야 합니다.
수정 코드:
// 기존 코드
commentTextArea.innerHTML = content;// 수정 코드: textarea의 value에 내용 할당
commentTextArea.value = content;코드 설명:
commentTextArea.value = content;로 textarea에 텍스트를 설정하면 textarea 내에 content 값이 텍스트로 표시됩니다. 이 방법은 textarea의 기본 동작에 맞는 방식입니다.
예시:
function handleEditCommentBtn(commentId, content) {
console.log("수정버튼클릭! ", commentId);
editingCommentId = commentId;
createOrEditCommentBtn.textContent = "댓글 수정";
// content를 textarea에 표시 (innerHTML이 아니라 value 사용)
commentTextArea.value = content;
}이렇게 수정하면 textarea에 댓글의 내용이 올바르게 설정되어 화면에서 수정할 수 있는 상태로 변경됩니다.
추가적인 고려 사항:
-
textarea의 줄바꿈 처리: 만약 content 안에 줄바꿈을 포함한 텍스트가 있다면, textarea는 줄바꿈을 자동으로 처리합니다. 그래서 별도로
<br>같은 HTML 태그를 처리할 필요는 없습니다. -
value와 innerHTML 차이:
value: 폼 요소의 값 (예: textarea, input 등) 설정 및 읽기innerHTML: HTML 요소의 내용을 설정하거나 읽기 (주로 div, span, p 등에서 사용)
textarea와 같은 입력 필드에서 value를 사용해야 하는 이유는 이들이 텍스트 입력 필드이기 때문입니다.
🚀 에러 해결! 나의 결론
줄바꿈이 있는 댓글 내용의 경우, textarea에 띄울때 줄바꿈을 적용하여 보여주고 싶어서 innerHTML을 사용했던건데 textarea같은 입력요소에 대해서는 value를 써야함을 몰라 발생한 에러였다.
물론 value를 사용하게되면, 줄바꿈이 적용되지 않기에 줄바꿈은 css를 통해 설정해주었다.
.commentContent{
padding-left: 46px;
font-size: 15px;
white-space: pre-wrap; /* 줄바꿈 문자 그대로 반영 */
}
innerHTML을 사용했을 땐 줄바꿈 있는 댓글 내용이 안녕하세요<br>반갑습니다.이런식으로 br태그를 포함한 채로 떴던 오류가 있었는데 다 같은 문제였었다.
DOM의 문제라고 생각했었는데 이렇게나 간단히 해결될 문제 였다니... innerHTML과 value의 차이를 모르고 무작정 사용해서 발생한 문제였다.
코드를 검색해서 사용하더라도 제대로 이해하고 사용하는 것의 중요성을 느꼈다.
