Map() 으로 임시 저장소 만들기
라디오 버튼으로 탭을 만들 때, 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는 튼튼하게 관리된 시스템을 구현하기에 좋다.