JavaScript/javascript UI
UI: Select option (하드코딩 & forEach함수)
SeaPlus
2021. 9. 16. 11:04
form 에서 상품들을 선택하면 그에 맞게 사이즈 option들이 변하는 UI 이다.
소핑몰 웹사이트에서 흔하게 볼수 있는 매우 기본적인 UI로, 하드코딩 방법과 동적프로그래밍 방법으로 구현해봤다.
(JQuery 사용!)
하드코딩이란?
- 상수나 변수에 들어가는 값(문자열, 정수 등)을 literal이라고 하는데, 이 값을 소스코드에 직접 쓰는 게 하드코딩
- 반대로, 소스코드에 직접 쓰지 않고 데이터를 외부 파일로 빼서 따로 관리하는 것을 '로딩'이라고 한다.
장점
- 육안으로 값을 직접 확인할수있다.
- 로딩절차 없이 다이렉트로 읽을수 있어 속도가 비교적 빠르다.
단점
- 자주바뀌는 데이터를 하드코딩하면 계속해서 수정하고 ,재컴파일, 재배포 해야한다.
- 유지보수, 운용이 어렵게 된다.
[HTML]
<h1>Select 시 변하는 option 예제</h1>
<form action="GET" class="container my-5">
<div class="form-group">
<p>상품선택</p>
<select id="option1" class="form-control">
<option>바지</option>
<option>셔츠</option>
</select>
<div class="size-select">
<p class="mt-4">사이즈선택</p>
<select id="option2" class="form-control">
<option>95</option>
<option>100</option>
<option>105</option>
</select>
</div>
</div>
</form>HTML의 구성은 심플하게 했다. #option1의 상품선택 option에는 바지,셔츠 두 상품을 두고 #option2는 사이즈들로 구성해서 #option1을 클릭하면 #option2의 사이즈들이 보이는 UI이다.
[1. HTML의 요소들을 숨겼다 보여주는 방법]
//change는 요소값 변경했을때 발생하는 이벤트
$("#option1").on("change", function () {
// 만약에 사용자가 선택한 값이 셔츠라면 ui를 보여준다.
// 만약 #option1의 선택된 값이 == 셔츠이면
if ($("#option1").val() == "셔츠") {
$(".size-select").addClass("show-display");
} else {
$(".size-select").removeClass("show-display");
}
});- #option2의 display값을 none 으로 적용한뒤 "show-display" 라는 display:block으로 된 클래스를 만들어 addClass, removeClass 를 통해 적용과 해제를 할수 있다.
- 이 방법은 많은 옵션이 발생 할 수록 HTML 태그가 지저분해진다는 단점이 있다.
[2. JS 내부에서 option 을 하드코딩하는 방법]
$("#option1").on("change", function () {
if ($("#option1").val() == "셔츠") {
$("#option2").html("");
// 변수를 선언한 뒤 `` 를 이용해 html태그를 코딩한다
var 탬플릿 = `<option>95</option>
<option>100</option>
<option>105</option>
`;
// append() 함수는 선택한 요소의 내용의 끝에 콘텐츠를 추가 한다.
// 하드코딩된 값,변수를을 적용하려면 append()함수를 사용해 적용
$("#option2").append(탬플릿);
}
});- #option2의 값들을 html 이 아닌 js 내에서 하드코딩하는 방법이다.
- 요소들은 backtick( ` `)내부에 적어야 템플릿 리터럴방식에 의해 문자열의 개행까지도 용이하게 하드코딩 가능하다.
- 변수에 하드코딩된 값을 반영한뒤 append()함수를 통해 #option2에 데이터를 넣는 구조 이다.
- 이 방법 역시 많은 옵션이 발생 할 수록 JS 파일이 지저분해 지고 유지보수가 어렵다는 단점이 있다.
[3. JS 내부 하드코딩을 for문으로 축약하는 방법]
//셔츠사이즈
var 셔츠사이즈 = [95, 100, 105];
//바지사이즈
var 바지사이즈 = [26, 28, 30, 32, 34, 36];
$("#option1").on("change", function () {
if ($("#option1").val() == "셔츠") {
//option2 내부 속성들을 계속해서 초기화 한다.
$("#option2").html("");
for (i = 0; i < 3; i++) {
//${array[index]}는 최신 js 문법으로 ``내부에 변수를 삽입할수 있는 기술이다.
var 탬플릿 = `<option>${셔츠사이즈[i]}</option>`;
$("#option2").append(탬플릿);
}
} else if ($("#option1").val() == "바지") {
//option2 내부 속성들을 계속해서 초기화 한다.
$("#option2").html("");
for (i = 0; i < 6; i++) {
//${array[index]}는 최신 js 문법으로 ``내부에 변수를 삽입할수 있는 기술이다.
var 탬플릿 = `<option>${바지사이즈[i]}</option>`;
$("#option2").append(탬플릿);
}
}
});- #option2의 값들을 js에서 하드 코딩하는 대신 배열로 만든다.
- for()반복문 내부에 탬플릿리터럴 방식을 통해 배열의 값들을 받아와서 #option2에 반복적으로 넣는 과정을 가진다.
- 위와 같이 반복문을 사용한 방법은 유지보수도 용이하고 훨씬 코드자체도 간결해 진다.
[4. JS 내부 하드코딩을 forEach 반복문으로 축약하는방법]
//상품
var 상품 = ["셔츠", "바지", "맨투맨", "신발"];
//셔츠사이즈
var 셔츠사이즈 = [95, 100, 105];
//바지사이즈
var 바지사이즈 = [26, 28, 30, 32, 34, 36];
//맨투맨사이즈
var 맨투맨사이즈 = [90, 95, 100, 105, 110];
//신발사이즈
var 신발사이즈 = [230, 235, 240, 245, 250, 255, 260];
// 상품 목록을 계속해서 자동 할당
상품.forEach(function (i) {
var 상품탬플릿 = `<option>${[i]}</option>`;
$("#option1").append(상품탬플릿);
});
// 상품 사이즈를 할당하기 위한 프로그래밍을 함수로 만들었다.
function template(list) {
//option2 내부 속성들을 계속해서 초기화 한다.
$("#option2").html("");
//forEach-> 왼쪽 array 자료 갯수만큼 반복문을 돌려라
//반복문이 인덱스값으로 진행되는게 아니라 배열 내부 값들로 반복되기때문에 배열 내부 값들을 append()함수에 넣는다.
list.forEach(function (i) {
var 사이즈탬플릿 = `<option>${[i]}</option>`;
$("#option2").append(사이즈탬플릿);
});
}
$("#option1").on("change", function () {
if ($("#option1").val() == "셔츠") {
template(셔츠사이즈);
} else if ($("#option1").val() == "바지") {
template(바지사이즈);
} else if ($("#option1").val() == "맨투맨") {
template(맨투맨사이즈);
} else if ($("#option1").val() == "신발") {
template(신발사이즈);
}
});- forEach는 배열,map 등을 위한 반복문이다.
- forEach -> 왼쪽 array 자료 갯수만큼 반복문을 돌려라
- 반복문이 인덱스값으로 진행되는게 아니라 배열 내부 값들로 반복되기때문에 배열 내부 값들을 append()함수에 넣는다.
- forEach내부 함수는 콜백함수이다.
- forEach문을써서 option2에 배열 값들을 넣는 문제는 계속해서 발생하고 있다 -> 함수로 만든뒤에 필요할때마다 함수를 호출하면된다.
출처:
https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=guseod24&logNo=221459329316