TIL 18일차

dataset

주의사항1

1. 태그에서 data-isOpen으로 지정해서 값을 찾아올땐 $dom.dataset.isopen으로 처리해야한다.
2. 태그에서 data-is-open으로 지정해서 값을 찾아올땐 $dom.dataset.isOpen으로 처리해야한다.

주의사항2 (From 1-B 권정희님)

`
     <ul>
    ${this.state
      .map(
        (document) =>
          `<li class="rootDoc" id=${document.id} data-is-open="false" data-text=${document.title}>${document.title}<button>X</button></li>`
      )
      .join("")}
    </ul>
      `

해당 부분에서 document.title이 만약 "화작과 문법" 이라면 이는
data-text에서 화작과만 인식하고 문법은 포함시키지않는다.
data-text="작문과" 화작 이런식이다.

이를 해결하기 위해서는

data-text="${document.title}" 이런식으로 다뤄야
data-text="작문과 화작"이 진행된다.

true / false

Boolean('true')			//true
Boolean('false')		//true

Boolean에 공백이 아닌 String을 넣으면 둘다 true이다.
원하는 false 문자열에서 false Boolean을 얻고 싶다면
JSON.parse('false')를 통해 false를 받아 처리를 한다.

이벤트 위임

this.render를 진행시킬 때 A라는 태그에 click이벤트를 걸면 그 후 해당 이벤트를 더는 걸지않고 한번의 이벤트를 걸고
this.render를 통해 A 태그 아래의 모든 태그들을 렌더링 처리를 진행해도
A태그는 영향을 받지않아 이벤트 위임되어 처리된다.

• this.render 전

A태그 - > 클릭 이벤트 등록
	B태그 -> 이벤트 위임을 통한 클릭 이벤트 존재
		C태그   -> 이벤트 위임을 통한 클릭 이벤트 존재

• this.render 후 아래 태그 내용이 바뀔 때

A태그 - > 클릭 이벤트 등록
	F태그 -> 이벤트 위임을 통한 클릭 이벤트 존재
		E태그   -> 이벤트 위임을 통한 클릭 이벤트 존재
        			H태그   -> 이벤트 위임을 통한 클릭 이벤트 존재

출처

true/false