인프런 커뮤니티 질문&답변
작성한 질문수
섹션7-newSpan.textContent = todoContents; 에 관해
해결된 질문
작성
·
260
0
const createTodo = function (storageData) {
let todoContents = todoInput.value;
if (storageData) {
todoContents = storageData.contents;
}
const newLi = document.createElement("li");
const newSpan = document.createElement("span");
const newBtn = document.createElement("button");
newBtn.addEventListener("click", () => {
newLi.classList.toggle("complete");
saveItemsFn();
});
newLi.addEventListener("dblclick", () => {
newLi.remove();
saveItemsFn();
});
if (storageData?.complete) {
newLi.classList.add("complete");
}
newSpan.textContent = todoContents;
newLi.appendChild(newBtn);
newLi.appendChild(newSpan);
todoList.appendChild(newLi);
todoInput.value = "";
saveItemsFn();
};잘 이해가 되지않는 부분이 있어 질문남깁니다!
newSpan.textContent = todoContents;이곳에서 todoContents대신 todoInput.value로 할당했을 때 localstorage의 content에 값이 정상적으로 전달되지않고 ""로 빈 값이 저장되는 지 궁금합니다.
답변 1
1
안녕하세요 weekend12님!
질문해 주신 내용을 확인해 보면
newSpan.textContent = todoContents;위 코드의 todoContents를 todoInput.value로 변경하였을 때, 왜 localStorage에 빈 문자열("")이 저장되는 것인지에 관한 질문으로 파악되네요!
먼저 createTodo 함수는 li 태그로 표현되는 할 일 목록을 하나씩 생성하기 위해 활용되는 함수입니다.
각 할 일을 담고 있는 li 태그를 생성하고 마지막에는 localStorage에 새롭게 추가된 데이터를 더해 목록을 저장하게 되죠.
createTodo 함수가 호출되는 경우, 즉 할 일 목록이 하나씩 생성되는 때는 총 두가지 입니다.
input box에 할 일을 입력하고 Enter 키를 누르는 경우
페이지가 렌더링 될 때, localStorage에 할 일 목록이 저장되어 있는 경우
먼저 첫번째 경우는 todoInput의 value가 존재합니다. 우리가 직접 할 일을 입력하고 Enter 키를 눌렀기 때문이죠.
두번째 경우는 페이지가 렌더링 될 때 실행되는 경우입니다. 즉, 우리가 어떠한 동작을 취하기도 이전에 페이지가 불러와지며 바로 실행되는 것이죠. 이때는 input box가 당연히 비어 있겠죠?
때문에 우리는 localStorage에 저장된 데이터들을 storageData라는 이름의 매개변수로 받아와서 저장된 내용을 토대로 li 태그를 하나씩 생성했습니다.
이후 과정에서 우리는 localStorage에 값을 저장할 때, 현재 존재하는 li 태그들을 참조해서 값을 저장했습니다.
그런데 우리가 todoContents를 사용하지 않고 todoInput의 value를 사용한다면, 2번 경우에 해당하여 createTodo 함수가 호출 됐을 때, 빈 값을 사용해서 li 태그가 생성 되었을테니, localStorage에도 빈 문자열이 저장되어 버리는 것이죠.
이해되었습니다 감사합니다 ㅠㅠ