-
Map() 으로 임시 저장소 만들기JavaScript 2023. 10. 20. 09:20
라디오 버튼으로 탭을 만들 때, html 요소의 값만 저장해서 변경할 수 있는 기능을 만들고 싶었다.
<div id="radioLabelBox"> <input type="radio" class="imageTabRadio" id="imageTab1" name="imageTabs" value="1" checked> <label for="imageTab1" class="imageTabLabelL"> 이미지1 </label> <input type="radio" class="imageTabRadio" id="imageTab2" name="imageTabs" value="2"> <label for="imageTab2" class="imageTabLabelR"> 이미지2 </label> </div> <select name="compName" id="companyName"> <option value="default" selected>회사명 선택</option> <option value="a"> a </option> <option value="b"> b </option> <option value="c"> c </option> <option value="d"> d </option> </select> <textarea class="customerIntro" rows="3" name="customTextContent" id="customTextContent" maxlength="60" placeholder="Place Holder"></textarea>
let radioMap = new Map(); radioMap.set(1, { companyNameIndex: 0, content: '', placeHolder: "Place Holder" }); radioMap.set(2, { companyNameIndex: 0, content: '', placeHolder: "Place Holder" }); let currentRadioValue = parseInt(document.querySelector('input[type="radio"][name="imageTabs"]:checked').value); const imageRadioTabs = document.querySelectorAll('input[type="radio"][name="imageTabs"]'); imageRadioTabs.forEach(radio => { radio.addEventListener('change', function(e) { const beforeRadioValue = currentRadioValue; const beforeCompanyNameIndex = document.querySelector('#companyName').selectedIndex ?? ''; const beforeContent = document.querySelector('#customTextContent').value ?? ''; const beforePlaceHolder = document.querySelector('#customTextContent').placeHolder ?? ''; radioMap.delete(beforeRadioValue); radioMap.set(beforeRadioValue, { companyNameIndex: beforeCompanyNameIndex, content: beforeContent, placeHolder: beforePlaceHolder }); const radioElement = e.target; currentRadioValue = parseInt(e.target.value); const changedInfo = radioMap.get(currentRadioValue); document.querySelector('#companyName').selectedIndex = changedInfo.companyNameIndex; document.querySelector('#customTextContent').value = changedInfo.content; document.querySelector('#customTextContent').placeHolder = changedInfo.placeHolder ?? ''; }) })
1. 라디오 버튼을 클릭할 시 , 임의의 버튼을 특정하기 위해서 각 input에 value를 넣었다.
2. Map() 객체를 생성해서 input의 value와 동일한 데이터를 key 값으로 설정하고, 저장하고싶은 값들을 배열 안에 저장했다.
3. 이벤트 발생 시 , 현재 데이터를 배열 안에 저장하고 클릭된 요소의 데이터를 불러온다.
라디오 버튼을 누르면 해당 Map() 에 저장된 데이터를 불러온다.
Map() 이란?
key - value 쌍을 이루는 집합이다. 한 Map에는 오직 단 하나의 key만 존재하기 때문에 내부의 데이터들은 유일성을 가질 수 있다.
Map을 for 루프로 돌리면 [key, value] 로 이루어진 멤버가 2개인 배열을 반환하며 삽입된 순서대로 진행한다.
객체와 Map은 대체로 매우 유사하고, 몇 가지 차이점이 있다
1) 우발적 키
- Map은 기본적으로 키를 포함하지 않고, 명시적으로 입력된 내용만 포함된다
- Object는 프로토타입이 있기 때문에, 기본키와 자신의 키가 충돌할 수 있다.
2) 보안
- Map은 사용자가 제공하는 키와 값에 대해서 안전하게 사용할 수 있다.
- Object는 사용자가 제공한 key-value 쌍을 Object에 설정하면 공격자가 객체의 프로토타입을 재정의하여 객체 주입 공격을 발생시킨 수 있다. ( 이는 null 프로토타입 객체를 사용해서 문제를 해결할 수 있다 )
3) key 유형
- Map은 모든 값이 key가 될 수 있다. (함수, 객체, 원시값 포함)
- Object의 key는 String 또는 Symbol 이어야한다.
-> Map은 값의 추가와 제거가 빈번한 상황에서 이용하기 좋고, Object는 튼튼하게 관리된 시스템을 구현하기에 좋다.
'JavaScript' 카테고리의 다른 글
이벤트를 바인딩하는 2가지 방법 (0) 2023.10.20 form에 이미지 파일 전송하기 (0) 2023.09.21 submit 이벤트 수정 시 유의사항 (0) 2023.04.27 jquery에서 여러개의 요소에 event를 지정하는 방법 (0) 2023.04.26