JS Project 하면서 자주 사용한 패턴- 키워드 정리

 

JS로 재사용가능한 태그 만들어 사용하기

let 변수이름 = document.createElement("태그이름");

- 변수에 원하는 태그를 생성하여 담아놓는 패턴.

 

let 텍스트변수 = document.createTextNode("문자열 또는 HTML Symbols");

- 변수에 문자열이나 특수문자를 담아놓고 사용하는 패턴.

https://www.htmlsymbols.xyz/unicode/U+00D7

HTML Symbols

 

담아놓은 '태그변수'에 Class를 부여하고 태그의 자식인자로 '텍스트변수'를 할당한다.

이렇게 활용 가능한 태그가 완성된다.

 

접근자 이해하기

선택된 태그의 위치를 파악하고, 선택된 태그를 기준으로 상대적인 경로로 접근합니다.

예) node.parentElement 는 부모노드를 node.childNodes를 사용한다.

 

자세한 부분은 MDN에서 Node관련 인스턴스 속성을 살펴보는 게 도움이 됩니다.

https://developer.mozilla.org/en-US/docs/Web/API/Node

Node - Web APIs | MDN

 

JS로 Style 변경하기

node.style로 스타일 관련 인스턴스 속성에 접근할 수 있습니다.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style

HTMLElement: style property - Web APIs | MDN

 

번외로

JS로 상태관리하는법

React에서는 상태관리를 좀 더 쉽게 하지만 JS에서는 아래의 코드처럼 사용한다.

let list = document.querySelector("ul");
list.addEventListener(
  "click",
  function (ev) {
    if (ev.target.tagName === "LI") {
      ev.target.classList.toggle("checked");
    }
  },
  false
);

DOM요소를 선택해 이벤트를 감지하고 요소에 "checked" class를 추가해 toggle관리를 한다.

간단한 상태관리를 한다고 생각한다.