2021.6.17(thu)_dataset

✱dataset

상황 : 체크박스 모달에서 라벨이 선택되면 모달창이 닫혔을 때 선택된 라벨이 렌더링돼야 한다.

의도 : 모달 내 메뉴 아이템 요소에 dataset속성으로 라벨에 대한 정보를 객체로 넣고, 클릭 && checked 됐을 때 dataset 정보를 state로 저장해서 렌더링하려고 했음

문제 : dataset의 반환값이 DOMStringMap 이라서 객체를 넘겨줄 수 없음..그냥 문자열로만 받을 수 있음. 이걸 왜 이제 알았지...?

해결 : 코드가 좀 늘어나긴 하지만 각각 키로 주려고 했던 정보들을 dataset을 여러개로 해서 보냄 그리고 클릭핸들러에서 그 정보들을 객체로 만들어줌.

<MenuItemOption
  data-id={id}
  data-title={title}
  data-color_code={color_code}
  data-font_light={font_light}
>
  ...
</MenuItemOption>

Object.assign({}, element.dataset)

 

그리고 추가로, data- 뒤에 가능한 것과 불가능한 게 있다.

data- 가능: 소문자, 점(.), 하이픈(-), 로우데시(_), 콜론(:)
data- 불가: 대문자

 

그리고 html에서 data-abc-def는 dataset.abcDef로 읽을 수 있다.(하이픈만)

리액트로 하면서 속성에 하이픈이 들어가는 게 이상해서 data-colorCode라고 했더니 에러가 떴다.

data-color_code로 하니까 에러 없어짐!