jQuery show() hide() 이벤트 배워보기!

오늘은 jQuery의 show와 hide 이벤트에 대한 내용을 주제로 정리해 보려고 한다. 해당 이벤트는 특정 요소를 간단하게 보여주거나 숨기는 기능이며, 사용 방법은 매우 간단하다.

 

---

show와 hide의 개념

UI에서 show와 hide의 처리는 다양한 환경에 사용되는 중요한 개념이다. 특정 요소를 선택하여 보이거나 감추는 기능인데, 이 간단한 기능이 매우 유용하게 쓰이고, 자바스크립트와 jQuery 뿐만 아니라 다양항 프론트엔드 라이브러리에서는 공통되는 개념이기 때문에 숙지하고 넘어가는 것이 좋다.

Show
요소의 표시를 할 때 사용되며, show는 화면에 특정 요소를 보이게 한다. 이는 사용자에게 해당 요소를 표시하여 시각적으로 접근할 수 있도록 한다.
사용자가 요소와 상호작용할 수 있도록 하기 위해 일반적으로 사용되며, 버튼을 클릭하면 특정 내용이 표시되는 것과 같은 상황을 예로 들 수 있다.
그리고 시각적인 효과에도 유용한데, 요소가 보이는 것은 사용자 경험을 향상시키는 데 중요하며, 적절한 시각적 효과와 함께 보이는 요소는 사용자의 관심을 끌고 사용자 인터페이스를 보다 직관적으로 만들어준다.


Hide
요소를 숨길 때 사용되며, hide는 화면에서 특정 요소를 숨기는 효과다. 요소를 더 이상 시각적으로 보이지 않도록 할 때 주로 사용되며, 화면에서 특정 요소를 감춤으로써, 해당 요소가 차지하던 공간을 확보할 수 있다. 이는 다른 요소가 더 많은 공간을 차지하거나 레이아웃이 더 나은 방식으로 조정될 수 있도록 한다.
사용자에게 필요하지 않은 요소를 화면에서 감춤으로써 사용자 경험을 개선할 수 있으며, 이는 화면을 깨끗하고 단순하게 유지하고, 사용자가 필요한 정보에 집중할 수 있도록 한다.


Show와 Hide는 화면 개발에서 중요한 요소이며, 적절히 사용함으로써 사용자 인터페이스를 보다 효과적으로 관리하고 사용자의 요구에 더욱 적절하게 대응할 수 있다.

---

show와 hide의 활용 사례

jQuery의 show()와 hide() 함수는 요소의 가시성을 조절하는 데 사용되며, 다양한 상황에서 활용될 수 있다.


버튼 클릭시 특정 요소 보이기/감추기

$('#showButton').click(function() {
    $('#elementToToggle').show();
});

$('#hideButton').click(function() {
    $('#elementToToggle').hide();
});

위의 코드는 사용자가 버튼을 클릭할 때 elementToToggle 요소를 보이거나 감추는 예제 코드다. showButton을 클릭할 때에는 요소를 보여주고, hideButton을 클릭할 때에는 요소를 감추게 된다.


조건에 따른 요소 보이기/감추기

if (condition) {
    $('#element').show();
} else {
    $('#element').hide();
}

위의 코드는 어떤 이벤트가 실행되었을 때 condition 조건에 따라서 elementToShow 요소를 보이거나 감추는 코드다. condition의 값이 스위치가 되며, toggle의 개념과 같다고 볼 수 있다.


마우스 이벤트에 따른 요소 보이기/감추기

$('#triggerElement').hover(function() {
    $('#elementToToggle').show();
}, function() {
    $('#elementToToggle').hide();
});

triggerElement 요소에 마우스가 hover 되었을 때 elementToToggle 요소를 보이거나 감추는 코드다. 여기서 hover는 마우스가 올라가거나 요소에서 벗어날 때를 감지하는 기능이다.

---

show와 hide의 예제 소스 코드

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(function () {

    /**
     * show button click 이벤트
     */
    $('#showId').unbind('click').click(function () {
        $('#spanId').show();
    });

    /**
     * hide button click 이벤트
     */
    $('#hideId').unbind('click').click(function () {
        $('#spanId').hide();
    });
});
</script>
<div>
    <input type="button" value="show click" id="showId">
    <input type="button" value="hide click" id="hideId">
</div>
<br>
<div>
    <span id="spanId" style="display:none;">안녕하세요. 산코디입니다!</span>
</div>

위의 소스 코드는 간단하게 show 버튼과 hide 버튼을 생성해 주고 span 태그를 보여줬다 숨겼다 하도록 하는 예제다.

여기서 span 태그에는 style 속성에 default 값을 주었고,
style="display:none;"
해당 속성을 주면 span 태그가 기본적으로 안 보이게 되는 css 속성이다.

---

 실행 결과

위의 실행 결과처럼 처음에는 아무것도 안 보이다가 show 버튼을 누르면 가려졌던 문구가 보이고 hide 버튼을 누르면 다시 가려지도록 하였는데 잘 되는 것을 확인할 수 있다.

 

---

'slow' 속성 예제 소스 코드

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(function () {

    /**
     * show button click 이벤트
     */
    $('#showId').unbind('click').click(function () {
        $('#spanId').show('slow');
    });

    /**
     * hide button click 이벤트
     */
    $('#hideId').unbind('click').click(function () {
        $('#spanId').hide('slow');
    });
});
</script>
<div>
    <input type="button" value="show click" id="showId">
    <input type="button" value="hide click" id="hideId">
</div>
<br>
<div>
    <span id="spanId" style="display:none;">안녕하세요. 산코디입니다!</span>
</div>

소스 코드에서는 show, hide 함수에 인자값을 설정해 줬다. slow 속성은 이름의 의미 그대로 show나 hide가 될 때 천천히 보이고 숨겨지도록 도와주는 설정이다. 
show : $('#spanId').show('slow');
hide : $('#spanId').hide('slow');

해당 설정을 해주면 span 태그의 문구가 천천히 보이고 천천히 숨겨지게 된다. 해당 속성만 추가해 주더라도 보이고 숨겨질 때 효과가 조금 더 안정적인 느낌을 준다.

---

실행 결과

기본으로 했을 때와 비교하면 천천히 부드럽게 문구가 보이고 가려지는 것을 확인할 수 있다.

 

반응형

'fast' 속성 예제 소스 코드

---

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(function () {

    /**
     * show button click 이벤트
     */
    $('#showId').unbind('click').click(function () {
        $('#spanId').show('fast');
    });

    /**
     * hide button click 이벤트
     */
    $('#hideId').unbind('click').click(function () {
        $('#spanId').hide('fast');
    });
});
</script>
<div>
    <input type="button" value="show click" id="showId">
    <input type="button" value="hide click" id="hideId">
</div>
<br>
<div>
    <span id="spanId" style="display:none;">안녕하세요. 산코디입니다!</span>
</div>

slow와 마찬가지로 넘겨줄 인자값만 바꿔줬다. fast 속성은 이름의 의미 그대로 show나 hide가 될 때 빠르게 보여지고 숨겨지도록 도와주는 설정이다. 
show : $('#spanId').show('fast');
hide : $('#spanId').hide('fast');

---

실행 결과

실행 결과는 slow를 줬을 때보다 훨씬 빠르게 동작을 하는 모습을 확인할 수 있다.

---

show와 hide 사용 시 주의사항

show와 hide를 사용하는 것은 화면을 조작하고 다루는 것이기 때문에 주의사항을 고려하여 구현하는 것이 중요하다.


애니메이션 효과 사용
기본적으로 show()와 hide() 함수는 애니메이션 효과 없이 요소를 즉시 나타내거나 숨기게 되는데, 만약 애니메이션 효과를 적용하려면 show()와 hide() 함수에 애니메이션 옵션을 추가해야 한다. 애니메이션을 사용할 때에는 사용자 경험과 성능에 영향을 미치므로 신중하게 결정해야 한다.

요소의 초기 상태
요소가 이미 보이거나 숨겨져 있는 상태에서 show() 또는 hide() 함수를 호출하는 경우에는 의도와 다르게 동작할 수 있다. 이미 보이는 요소에 show() 함수를 호출하면 아무런 변화가 없을 것이며, 따라서 요소의 초기 상태를 고려하여 함수를 사용해야 한다.

애니메이션 중복 방지
여러 번의 사용자 상호작용으로 인해 show() 또는 hide() 함수가 여러 번 호출될 수 있다. 이러한 경우에는 이전 애니메이션이 아직 완료되지 않은 상태에서 새로운 애니메이션이 시작될 수 있다. 이를 방지하기 위해 stop() 함수를 사용하여 이전 애니메이션을 중지시킬 수 있다.

콜백 함수
show()와 hide() 함수는 애니메이션이 완료된 후에 콜백 함수를 실행할 수 있도록 콜백 인자를 제공한다. 이 콜백 함수를 활용하여 요소가 나타나거나 숨겨진 후에 콜백 추가적인 작업을 수행할 수 있다.

성능
애니메이션 효과를 사용할 때에는 성능에 주의해야 한다. 복잡한 애니메이션 효과나 많은 요소에 애니메이션을 적용하는 경우에는 성능이 저하될 수 있다. 따라서 애니메이션을 사용할 때에는 가능한 간단하고 가벼운 애니메이션을 선택하고, 필요하지 않은 경우에는 애니메이션을 비활성화해야 한다.

---

마무리

오늘은 이렇게 jQuery의 show, hide 사용 방법과 간단한 설정을 통해 효과를 줄 수 있는 방법을 작성을 해봤다.
show(), hide() 함수는 태그 요소의 display가 none처리가 될 뿐 실제로 요소가 삭제되는 건 아니기 때문에 상황에 맞게 적절하게 사용하는 것이 중요하다.

기능은 참 간단하면서 활용도가 높아 보이는 기능이라고 생각하지만, UI에서 DOM 객체를 다루며 동적으로 애니메이션 효과를 주기 때문에 다양한 주의사항을 고려해야 한다는 점을 확인할 수 있었다. 그럼에도 화면 개발에서는 애니메이션 효과를 빼고 만들 수는 없기 때문에 주의사항을 숙지하고 적재적소에 맞게 최적화하여 기능을 구현하는 것이 좋을 것 같다.