2021 01 30 토 TIL - 24

Today I Learned

• Javascript

🚩Where they are..

• in private gitHub

Today Review

• 초반에 아래 코드가 이해가 되지 않아 사용하지 않았고 TodoList.setState(nextState)를 사용했다. 이렇게 사용한 후에야 아래 코드가 이해가 되어 다시 수정해두었다.

  setState = (nextState) => {
    this.state = nextState
    setItem(TODOLIST_KEY, nextState)
    this.components.forEach((component) => {
      component.setState && component.setState(nextState)
    })
  }

• TodoList.js에서 toggleTodoItem과 removeTodoItem을 구현할때 클릭 아이템이 클릭의 개수에 따라 같은 오브젝트가 1개 -> 2개 -> 4개 -> 8개로 늘어나는 오류가 있었다. 알고보니 setState() 안에 setState()를 사용하여 생겨난 결과였습니다. 수정후 정상작동했다.
• TodoInput.js에서 <input type='text' />에 엔터키와 클릭 이벤트를 동시에 적용시키기위해 <form></form>태그를 생성하여 addEventListener('submit', () => {})을 사용했다. 이 과정에서 실수로 remove all 버튼도 form 태그 안으로 넣어버려 배열을 모두 지워도 remove all 클릭시 submit이벤트가 동작하여 아래 코드가 동작되어 삭제버튼 하나가 보이게 되었다. 마크업 구조를 바로잡고 css로 스타일을 수정했다.

e.preventDefault()
let inputValue = this.$addItemInput.value
this.addTodoItem(inputValue)
this.$addItemInput.value = ''