JS 메모장
React로 넘어가기 전, JavaScript에서 DOM을 조작하는 코드를 작성해봤다. JavaScript에서 조작할 수 있도록 HTML 파일의 태그에게 적절한 id를 부여했다.
input에 쓰고 싶은 목록을 작성하고 Add 버튼을 누르면 메모 목록 하위에 작성한 목록이 추가되는 코드를 작성하고자 한다. 이 부분을 JS 파일에서 작업하는 것이다.
JavaScript VS jQuery
document.getElementById("title") VS $(#title")
jQuery는 JavaScript Library이다. 복잡한 JavaScript method를 간단하게 다룰 수 있다. 위에 코드를 보면 무슨 느낌인지 알 수 있을 것이다.
jQuery는 현역에서 쓰이고 있지만, DOM을 순차적으로 조작한다는 점에서 대규모나 데이터 전달이 복잡해지기 쉬운 웹 시스템 개발에서는 잘 안 쓰이는 추세라고 한다.
DOM 요소 얻기
JS에서 DOM을 조작할 때 사용하는 방법에 대해서 알아야 이 작업을 수행할 수 있다.
- document: DOM 트리의 엔트리포인트
- getElementById: id를 지정한 DOM 얻기
- getElementByClassName: class name으로 element 얻기
- querySelector: 괄호 안에 여러 Selector를 지정한 뒤 일치하는 첫 번째 요소 반환
- querySelectorAll: 일치하는 모든 element 얻기
DOM 작성, 추가, 삭제
Add 버튼을 클릭하면 목록에 새로운 태그가 추가된다. 이것을 처리하려면 다음과 같은 기능들을 이해해야 한다.
- createElement: 인수에 HTML 태그명을 문자열로 지정(새로운 태그 부착)
- appendChild: 특정 elment 아래에 다른 element 추가(새롭게 추가되는 목록)
- prepend: appendChild와 똑같이 특정 DOM 아래에 다른 DOM을 추가할 수 있다.
appendChild와 prepend는 똑같이 특정 DOM 아래에 다른 DOM을 추가할 수 있다고 했다. 그러면 이 두 개는 어떤 차이점이 있나?
먼저 appendChild를 사용한 코드이다.
const div = document.createElement("div");
const p = document.createElement("p");
const span = document.createElement("span");
div.appendChild(p);
div.appendChild(span);
console.log(div);아래 코드는 prepend로 작성한 코드이다.
const div = document.createElement("div");
const p = document.createElement("p");
const span = document.createElement("span");
div.prepend(p);
div.prepend(span);
console.log(div);appendChild와 prepend로 실행한 결과는 다음과 같다.
appendChild로 작성한 코드는 div 태그 아래 p 태그가 추가된 다음에 span 태그가 추가되지만, prepend로 작성한 코드는 div 태그 아래 p 태그가 맨 앞에 추가되고 그 다음 span 태그가 맨 앞에 추가되는 차이점이 있다.
추가하는 방법에 대해서 알았으니 이제는 삭제하는 방법에 대해 알아보자.
- removeChlid: 그 아래부터 지정된 element 삭제
특정 element를 삭제하는 방법은 이렇게 간단하다. 그러면 자녀 요소 모두를 삭제하려면 어떻게 해야 할까? textContent에 null을 지정하면 모든 요소가 삭제된다.
const body = document.querySelector("body");
body.textContent = null;body 태그 아래에 있는 모든 요소를 삭제하는 코드이다. 이러면 화면에 아무 요소도 출력되지 않는다.
결과
addEventListener를 사용해 버튼을 클릭하면 해당 이벤트를 처리할 수 있도록 했다. JavaScript 파일을 작성하면서 느꼈지만, 요소의 추가/삭제 기능의 코드가 길어져 가독성이 떨어진다는 단점이 있다.
이 단점을 보완할 수 있는 것이 React를 사용하는 것이다. 왜 React를 사용하면 좋다는 것인지는 다음 포스팅에서 알아보고 이번 포스팅은 여기서 마무리한다.
