TIL Day-13

VanillaJS를 통한 자바스크립트 기본역량 강화

컴포넌트 방식으로 생각하기

컴포넌트 방식으로 UI를 표현하고 어떻게 생각을 할건지,
UI의 요소들을 컴포넌트 단위로 추상화하기
응집력있게 개발하기

컴포넌트 방식으로 생각하기

만약 To do list를 만든다고 하면,

Header
TodoForm
TodoList
App

이렇게 4개의 컴포넌트를 생각할 수 있다.
독립적으로 사용할 수 있고, 재사용이 가능하다.

UI를 선언적으로 표현하기 위해, 표현하는 부분을 컴포넌트 단위로 추상화

각 컴포넌트의 계층

App
Header
TodoForm
TodoList

컴포넌트간의 의존성

   ↗   Header
App ➡   TodoForm
   ↘   TodoList

App이라는 컴포넌트가 3개를 컨트롤하는 형태
Header, TodoForm, odoList가 각각 독립적으로 동작
재사용이 가능

---

preventDefault()에 대해서 알아보자

function TodoForm({ $target }) {
   const $form = document.createElement('form')

   $target.appendChild($form)

   this.render = () => {
       $form.innerHTML = `
           <input type="text" name="todo" />
           <button>Add</button>
       `

       $form.addEventListener('submit', e => {
           e.preventDefault()
       })
   }
   this.render()
}

위의 코드는 TodoList를 만들 때 필요한 TodoForm.js의 일부이다.

여기서 Add를 누르면

페이지가 새로고침 되면서 url이 바뀌게 되는데
하지만

$form.addEventListener('submit', e => {
            e.preventDefault()
        })

이 코드를 추가하게 되면

아무런url에 아무런 변화가 일어나지 않는다.

여기서 오늘 처음 배운 e.preventDefault()는 태그의 기본 동작을 끄게하는 메서드이다.
예를 들어 a태그에서는 href 링크로 이동하는 것을 끄는 것처럼
form태그 안에서는 submit을 눌렀을 때 페이지가 새로고침 되는 url액션을 끄는 것이다.

이와 유사한 이벤트를 막는 방법을 더 찾아보았는데

• preventDefault() : 현재 이벤트의 기본 동작을 중지하는 것

• stopPropagation() : 현재 이벤트가 상위로 전파되는 것을 막는 것

• stopImmediatePropagation(): 현재 이벤트가 상위뿐만 아니라 현재 레벨에 걸린 다른 이벤트도 동작하지 않도록 중단하는 것

• return false : 네 번째는 위 3가지 방법과는 조금 다른 방법이다. jQuery를 사용할 때는 위의 두개 모두를 수행한 것과 같고, jQuery를 사용하지 않을때는 preventDefault()를 사용한 것과 같다.

이렇게 정리해 볼 수 있었다.

---

하루의 마무리

🖤 VanillaJS를 처음 다루어 보았는데 생각보다 더 재미있다!
🖤 각 기능마다 컴포넌트별로 나누어 작성하여 독립적으로 재사용 할 수 있도록 코드를 짜는 것이 중요 포인트인 것 같다!
🖤 2주차보다 3주차 TIL을 먼저 포스팅하게 될 것 같다😅