[JavaScript] 할 일 앱 만들기 #2 - 배열과 객체로 데이터 저장 & 삭제 구현하기

1단계에서는 배열없이 li를 바로 출력하면서 입력 및 출력을 확인했다면 2단계에서는 할 일을 저장하고, 보여주고, 계속 관리할 수 있도록 만들거다 그리고 삭제기능까지!

할 일을 모아둘 수 있는 그릇이 필요한데, 그게 바로 배열로 만드는 것임. 예시로

const todos = [
  { text: '청소하기', done: false },
  { text: '공부하기', done: false }
];

이렇게 적어야 나중에 삭제 및 수정, 완료체크 등 기능을 더 다양하게 할 수 있음(정보 저장이지)
1단계와 다르게 화면구현 + 데이터 관리까지 시작해보는 2단계 구현 start~!

todos 배열 = 할 일 전체 데이터 저장하는 공간
renderTodos() = 그 데이터를 화면에 보여주는 역할
push() = 새로운 할 일을 배열에 추가

2단계 전부 저장 = 배열 / 하나의 할일 = 객체 형식으로 저장

const todos = []

이렇게 배열을 만들어주면 내가 할일 입력을 할 경우 [{text : '청소하기', done :false}] 이렇게 나타나타니까 내가 헷갈렸던 부분은 배열이니까 단순히 값이 들어가니까 객체 형식으로 따로 저장해야하는지 몰랐다.
*todos 배열이 진짜 "데이터"임, 화면은 항상 이 배열을 기준으로 출력됨
오늘 복습하면서 확실히 알게 된 내용은 배열 안에 객체 같은 구조물이 들어간다는 걸 알 수 있었다. 숫자, 문자, 객체, 함수, 배열 모두 가능하다. 그러므로 지금 구현한 것은 결국 객체의 배열이라는 것!

객체는 { key: value }
배열은 [0, 1, 2, ...]

const newTodo = {
      text: todoText,
      done: false,
    };

   todos.push(newTodo);

이렇게 객체 형태로 (newTodo)할일을 저장해주고, 배열(todos)에 새 할일(newTodo을 추가해준다.
그리고 리스트에 출력해주는데 forEach를 사용해준다.

todos.forEach((todo, index) => {
      const li = document.createElement('li');
      li.textContent = todo.text;

todos 배열에 객체 데이터 값이 들어가있으니까 하나씩 순회하면서 todo는 할일 객체, index는 몇번째 항목인지로 li를 만들고 텍스트는 todo.text로 설정했다.

여기서도 index가 왜 필요하지? 싶었다. 단순히 목차 개념 생각하고 말이다. 근데 index는 배열에서 위치를 기억해주는 값으로 나중에 삭제하거나 수정할 때 꼭 필요한 요소였다.

결과물 보이는 것 처럼 배열에 할일 객체 저장하고 출력까지 한다.

3단계 삭제 버튼 추가 + 배열과 화면에서 해당항목 삭제

  const deleteBtn = document.createElement('button');
      deleteBtn.textContent = '삭제';
      deleteBtn.style.marginLeft = '10px';

삭제 버튼을 js에서 바로 추가하고 스타일링 간략히 해주었다.

  deleteBtn.addEventListener('click', () => {
        deleteTodo(index);
      });
      
      li.appendChild(deleteBtn);
      list.appendChild(li);

button click시 deleteTodo(index)가 실행되도록 했고, 버튼을 li요소에 추가함 = 화면에 출력됨
버튼을 생성해서 li.appendChild(deleteBtn) 으로 넣는 구조를 동적 UI구성의 기초인데 이로 인해서 목록마다 삭제 버튼 만들어주기가 가능했다.

삭제 기능 구현이 제일 쉽다고 강의 들었을 때 기억이 나는데,,나는 당연히 기억이 안나니까 찾아보았고 찾아보면서 매우 간단하다는 걸 다시한번 더 확인하게 되었다.

  const deleteTodo = (index) => {
    todos.splice(index, 1);
    renderTodos();
  };

splice(index, 1) 해당 인덱스에서 1개의 항목을 삭제하도록 했고, 삭제후 배열 기준으로 다시 화면 출력되도록 했다.
splice()는 원본 배열을 직접 수정하는 메서드임.
만약에 원본을 유지하고싶다면 나중에 filter()도 쓸 수 있다는 것을 확인 했다.

💭 그렇다면 여기서 궁금증?

splice는 원본 배열을 수정하는건데 내 생각엔 원본을 수정 안하는게 좋은거 아닌가? 라는 생각이 들었다.
그래서 개념을 더 찾아보았다.
splice는 원본 배열에서 직접 변경한다라는 것을 의미함. 입력한 코드에서는 index위치의 항목 1개를 삭제하겠다 이 말임 그래서 todos 배열 자체가 변경될 것을 의미하기도 해.

그래서 ✨ 내가 생각한 궁금증의 답은 = 현재 상황 같은 간단한 JS예제에서는 괜찮지만, 규모가 커지거나 상태추적이 필요한 경우엔 원본을 바꾸면 버그의 원인일 될 수 있기때문에 filter()을 많이 사용한다고 한다.
그리고 React같은 경우 보통 state를 직접 바꾸면 안되기 때문에 예로 들자면 setTodos(todos, filter(...))처럼 새 배열을 만들어서 바꾸는 패턴을 쓰는게 맞다고 한다.

🤩🤩🤩 공부 끝으로 !!
작은 예제라도 "왜 이렇게 되는지" 하나하나 고민해보면서 이해하니까, 정말 자바스크립트가 눈에 들어오기 시작했다!
조금씩 의문을 기록하고, 직접 찾아보면서 확실히 내 걸로 만들자.