data-set
사용 이유
HTML 태그를 사용할 때 나중에 이 태그에 담긴 값을 가져와서 다시 사용해야 할 일이 있다. id를 가져와서 어떤 함수를 작동시키거나 할 때
const myFunction = (id) => {
// id를 사용
...
}
...
return(
<button onClick={()=>{myFunction(id)}} />
)이런식으로 사용했는데, 이건 매번 렌더링 시에 새로운 함수가 생성되기도 하고 함수를 태그 선언하며 인라인으로 넣어준다는게 마음에 걸렸다. 이런 경우 강사님은 data-id라는 속성으로 넣어두고는 dataset을 사용해 가져와 사용했다.
사용 방법
어느 엘리멘트에나 data-로 시작하는 속성을 부여해주면 된다.
<article
id="electriccars"
data-columns="3"
data-index-number="12314"
data-parent="cars">
...
</article>그리고 javascript에서 사용할 때
var article = document.getElementById('electriccars');
article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"이렇게 해당 엘리먼트의 .dataset 속성에 접근하면 그 값들을 참조할 수 있다.
const {columns, indexNumber, parent} = article.dataset;
이렇게 구조분해할당을 쓸 수도 있다.
글자의 아래쪽이 잘릴 때
p 태그로 글자를 출력했는데 이상하게 g처럼 아래쪽으로 긴 글자들의 아래쪽이 잘려나가서 안보였다. 속성으로 overflow : hidden;를 설정해두었는데 이 이후로 잘리기 시작했다.
해결방법은 line-height였다.
line-height: normal;을 주자 글자가 정상적으로 잘리지않고 출력됐다.
도움
안녕하세요! 대학교 졸업한 이지훈입니다.