Select 인풋, this 사용법

 

 

select 들어간 폼을 만들어봅시다

 

 

Bootstrap이 설치되어있으면 이쁘게 나옴

 

<form class="container my-5 form-group">
    <p>상품선택</p>
    <select class="form-select mt-2">
      <option>모자</option>
      <option>셔츠</option>
    </select>
</form>

<select> 는 <input> 이랑 똑같은데

사용자가 고를 수 있는 선택지를 드랍다운 메뉴로 제공하는 <input> 입니다. 

선택지는 <option>으로 넣으면 됩니다. 

 

- <select> 태그도 선택시 input, change 이벤트가 발생합니다.

 

- <select> 태그도 .value로 유저가 입력한 값을 가져올 수 있습니다.

 

 

 

셔츠고르면 밑에 <select> 더 보여주기

 

 

 

 

html css로 미리 디자인해놓고 원할 때 보여주기만 하면 됩니다.

 

<form class="container my-5 form-group">
    <p>상품선택</p>
    <select class="form-select mt-2">
      <option>모자</option>
      <option>셔츠</option>
    </select>
    <select class="form-select mt-2 form-hide">
      <option>95</option>
      <option>100</option>
    </select>
</form>

 

미리 <select> 하나 더 추가했고 form-hide 클래스에는 display : none 주었습니다.

 

이제 "유저가 셔츠선택하면 form-hide 제거해주세요~" 라고 코드짜면 완성일듯요 

 

 

<script>
  if (유저가 선택한거 == '셔츠') {
    $('.form-select').eq(1).removeClass('form-hide');
  }
</script>

 

그래서 하단에 이렇게 짰습니다.

 

Q. 유저가 <select> 에서 뭐 선택했는지 어떻게 아냐고요?

 

A. <input>과 똑같이 .value 이런거 쓰면 가져올 수 있댔습니다. 

 

 

 

 

<script>
  var value = $('.form-select').eq(0).val();
  if (value == '셔츠') {
    $('.form-select').eq(1).removeClass('form-hide');
  }
</script>

실험해봤더니 <select> 찾아서 .value 붙이면 진짜로 선택한거 잘 출력됩니다.

그래서 위처럼 적어서 기능완성시켰습니다.

근데 작동안하는데요  

 

 

 

 

 

 

 

<script> 안에 대충 적은 코드는 페이지 로드시 1회 실행됨

 

중요하게 말하는 내용입니다

 

지금 "유저가 셔츠선택하면 form-hide 제거해주세요~" 라고 코드짰는데

 

이 코드는 <script> 안에 적었기 때문에 그냥 페이지 로드시 1회 실행되고 다시는 실행되지 않습니다.

그래서 저 코드를 <select> 조작할 때 마다 실행한다면 의도대로 잘 동작하지 않을까요 

아닙니까

 

 

 

 

<script>
  $('.form-select').eq(0).on('input', function(){

    var value = $('.form-select').eq(0).val();
    if (value == '셔츠') {
      $('.form-select').eq(1).removeClass('form-hide');
    }

  });
</script>

<input>이나 <select> 조작할 때 input 이벤트가 발생하기 때문에

그 이벤트리스너를 부착해봤습니다. 

잘되는군요 

 

 

 

 

- '모자' 선택 시 다시 숨기기

 

$('.form-select').eq(0).on('input', function() {
    var value = $(this).val(); // 현재 선택된 값 가져오기
    if (value == '셔츠') {
        $('.form-select').eq(1).removeClass('form-hide'); // 보이게 하기
    } else {
        $('.form-select').eq(1).addClass('form-hide'); // 숨기기
    }
});

 

✅ '모자'를 선택하면 form-hide 클래스를 다시 추가해서 숨기는 방식입니다.

 

 

지금 비슷한 셀렉터들이 많은데 변수화하면 성능개선이 되겠군요

 

- 변수화로 성능 개선

 

현재 코드에서 $('.form-select').eq(0)처럼 같은 요소를 여러 번 찾고 있습니다. jQuery에서 DOM 탐색은 비용이 크므로, 변수에 저장해놓고 사용하는 것이 더 효율적입니다.

 

$(document).ready(function() {
    var mainSelect = $('.form-select').eq(0); // 첫 번째 select
    var sizeSelect = $('.form-select').eq(1); // 두 번째 select

    mainSelect.on('input', function() {
        var value = $(this).val();
        if (value == '셔츠') {
            sizeSelect.removeClass('form-hide');
        } else {
            sizeSelect.addClass('form-hide');
        }
    });
});

 

 

 

- 이벤트리스너 안에서 e.currentTarget 아니면 this 이런거 써도 될듯요 

 

이벤트 핸들러 내부에서 this 또는 e.currentTarget을 활용하면 더 깔끔한 코드가 됩니다.

 

$(document).ready(function() {
    var sizeSelect = $('.form-select').eq(1); // 두 번째 select

    $('.form-select').eq(0).on('input', function(e) {
        var value = e.currentTarget.value; // 또는 $(this).val();
        if (value == '셔츠') {
            sizeSelect.removeClass('form-hide');
        } else {
            sizeSelect.addClass('form-hide');
        }
    });
});

 

✅ e.currentTarget.value 또는 $(this).val()를 사용하여 이벤트가 발생한 요소의 값을 가져왔습니다.
✅ $(this)는 이벤트가 발생한 요소를 가리키므로 $('.form-select').eq(0)을 직접 찾을 필요가 없습니다.

 

 

1️⃣ '모자' 선택 시 다시 숨김 → else문 추가
2️⃣ DOM 탐색 최적화 → 변수 사용

 

3️⃣ this와 e.currentTarget 활용 → 더 깔끔한 코드

이제 좀 더 효율적인 코드가 되었네요! 💡

 

 

 

✅ this는 언제 사용하면 좋을까?

this는 현재 실행 중인 함수 내부에서 "지금 실행된 주체(객체)"를 가리키는 키워드입니다.
즉, 이벤트 핸들러에서 this를 사용하면 이벤트가 발생한 요소를 직접 가리킬 수 있습니다.

---

1️⃣ this를 사용하면 좋은 경우

📌 이벤트 핸들러 내부에서 현재 이벤트가 발생한 요소를 가리킬 때

 

$('.btn').on('click', function() {
    $(this).text('클릭됨!');  // 클릭한 버튼의 텍스트 변경
});

 

✅ this는 클릭된 .btn 요소를 가리킵니다.
✅ $(this).text()로 해당 요소의 텍스트를 변경할 수 있습니다.

 

 

📌 같은 클래스를 가진 여러 요소를 개별적으로 조작할 때

$('.menu-item').on('mouseenter', function() {
    $(this).css('color', 'red');  // 마우스를 올린 메뉴 아이템만 빨간색으로 변경
});

 

 

✅ this가 마우스를 올린 그 요소 하나만 가리킵니다.
✅ $(this).css('color', 'red'); 하면 모든 .menu-item이 아니라, 현재 마우스를 올린 요소만 적용됩니다.

 

2️⃣ this를 사용하지 않아도 되는 경우

📌 특정한 요소를 직접 선택할 수 있을 때

예를 들어, 특정 ID가 있는 요소를 조작하는 경우라면 this를 사용할 필요가 없습니다.

 

 

 

$('#myButton').on('click', function() {
    $('#targetDiv').fadeIn(); // 특정 요소를 직접 조작
});

 

✅ #targetDiv는 고유한 ID를 가지고 있어서 this를 쓸 필요가 없습니다.

 

 

3️⃣ this vs e.currentTarget 차이

this는 이벤트 핸들러가 연결된 요소를 가리키지만, e.currentTarget도 같은 역할을 합니다.
차이점은 이벤트 위임(Event Delegation)에서 드러납니다.

🔹 this는 실제 클릭된 요소를 가리킴

 

<ul id="menu">
    <li>항목 1</li>
    <li>항목 2</li>
</ul>

 

 

$('#menu').on('click', 'li', function() {
    console.log(this);  // 클릭한 `li` 요소 출력
});

 

✅ this는 클릭한 li 요소를 가리킵니다.

🔹 e.currentTarget은 이벤트가 바인딩된 요소를 가리킴

$('#menu').on('click', function(e) {
    console.log(e.currentTarget);  // `ul#menu`가 출력됨
});

 

✅ e.currentTarget은 click 이벤트가 연결된 #menu를 가리킵니다.
✅ 즉, this는 실제 클릭된 li, e.currentTarget은 ul을 가리키는 차이가 있습니다.

 

 

📌 정리

사용 상황this 사용 여부

이벤트 핸들러에서 클릭한 요소만 조작할 때	✅ 사용
여러 개의 비슷한 요소에서 개별적으로 스타일 변경할 때	✅ 사용
특정 ID 요소를 조작할 때	❌ 불필요
이벤트 위임을 사용하면서 부모 요소를 가리킬 때	e.currentTarget 사용 가능

👉 즉, 이벤트가 발생한 "그 요소"를 조작하고 싶으면 this를 사용하면 됩니다! 🚀