오늘은 jQuery에서 요소를 비우거나 삭제할 때 많이 사용되는 empty()와 remove() 함수에 대해 정리해 보려고 한다. UI에서 동적으로 특정 요소를 비워주거나 삭제해줘야 하는 경우가 많이 있기 때문에 해당 함수에 대해서 알아두는 것이 좋다.
두 함수는 모두 태그 요소를 삭제한다는 개념은 동일하지만 선택 요소가 포함되는지, 아니면 선택 요소의 하위 요소만 삭제하는지의 차이가 있다. 개념과 특징을 살펴보면서 알아보도록 하자.
DOM 요소를 비워줘야 하는 이유
UI의 DOM 요소를 비워줘야 하는 이유는 여러 가지 이유가 있다. 기능을 배우기 전에 이 작업을 왜 하는지에 대해서 한번 정리해 보고 접근한다면 훨씬 더 도움이 될 수 있다.
메모리 관리
웹 페이지에서 동적으로 생성되고 제거되는 요소들이 많은 경우, 이들 요소가 메모리를 계속 차지할 수 있다. 요소를 비워서 해당 메모리 자원을 해제하면 불필요한 메모리 사용을 줄일 수 있다.
리소스 관리
웹 애플리케이션에서는 동적으로 생성된 요소들을 효율적으로 관리해야 한다. 사용하지 않는 요소를 비우면 리소스를 더 효율적으로 활용할 수 있다.
페이지의 성능
사용되지 않는 요소들이 많은 경우 페이지 로딩 속도가 느려질 수 있다. 비어 있는 요소를 제거하면 페이지의 성능을 향상시킬 수 있다.
사용자 경험
사용자가 요소를 반복해서 보는 경우에는 불필요한 내용물이 남아 있어 혼란스러울 수 있다. 비워진 요소는 사용자에게 더 명확한 사용자 경험을 제공할 수 있다.
보안
웹 페이지에서 사용자에게 민감한 정보를 제공하는 경우에는 해당 정보를 더 이상 필요하지 않을 때 요소를 비워서 민감한 정보가 노출되지 않도록 보안을 강화할 수 있다.
위의 정리한 바와 같이 DOM 요소를 비우는 것은 메모리 관리, 리소스 관리, 페이지의 성능 향상, 사용자 경험 및 보안을 개선하는 데 도움이 된다. 특히 HTML에서는 요소들이 동적으로 처리되는 것이 많기 때문에 사용하지 않는다면 비워주는 것이 효율적이다.
empty() 함수의 개념과 특징
empty() 함수는 선택한 요소의 자식 요소를 모두 제거하여 해당 요소의 내용을 비우는 기능이다. 선택한 요소의 내용물을 삭제하고 요소 자체는 유지하는 방법이다.
자식 요소 제거
empty() 함수를 호출하면 선택한 요소의 자식 요소들이 모두 제거된다. 선택한 요소 내에 있는 모든 하위 요소들이 제거된다.
내용물만 삭제
empty() 함수를 호출하면 선택한 요소의 내용물만 삭제되고 요소 자체는 유지된다. 선택한 요소는 DOM에 유지되지만 내용이 없는 상태가 되는 것이 특징이다.
이벤트 리스너 유지
empty() 함수를 사용하여 요소의 내용을 삭제하더라도 해당 요소에 연결된 이벤트 리스너는 유지된다. 따라서 이벤트 처리 동작은 유지되며, 이벤트 리스너를 다시 연결할 필요가 없다.
메모리 관리
선택한 요소의 내용물이 제거되면 해당 요소가 차지하던 메모리 자원이 해제된다.
예제 소스 코드
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(function () {
/**
* 데이터 리스트
*/
const dataList = [
{ name: 'red', data: 225 },
{ name: 'blue', data: 123 },
{ name: 'orange', data: 122 },
{ name: 'black', data: 191 },
{ name: 'white', data: 125 },
];
/**
* empty button click 이벤트
*/
$('#emptyId').unbind('click').click(function () {
let html = '';
dataList.forEach((item, index) => {
html += '<tr>';
html += ' <td>' + index + '</td>';
html += ' <td>' + item.name + '</td>';
html += ' <td>' + item.data + '</td>';
html += '</tr>';
});
// table tbody 요소 하위에 append html
$('#dataTable tbody').empty().append(html);
});
});
</script>
<div>
<input type="button" value="Empty click" id="emptyId">
</div>
<br>
<div>
<table id="dataTable" border>
<thead>
<tr>
<th>No</th>
<th>color</th>
<th>data</th>
</tr>
</thead>
</table>
</div>
<style>
table {
table-layout: fixed;
width : 500px;
}
</style>위의 예제 소스 코드는 table tbody 하위에 요소를 넣을 때 empty() 처리를 하는 소스 코드다. empty()는 선택한 요소의 하위 요소들을 전부 삭제해 주는 기능이 있다.
선택한 요소는 table > tbody 요소이며, 하위 요소인 tr을 전부 삭제하게 된다.
실행 결과
버튼 클릭을 할 때마다 tr 요소가 전체 삭제되고 다시 생성하는 모습을 확인할 수 있다.
remove() 함수의 개념과 특징
remove() 함수는 선택한 요소를 완전히 제거하는 기능이다. 선택한 요소와 해당 요소의 모든 하위 요소를 DOM에서 완전히 제거해 주며, 선택한 요소와 그 하위 요소들이 메모리에서 해제되고 DOM에서 제거된다.
선택한 요소 제거
remove() 함수를 호출하면 선택한 요소가 DOM에서 제거되며, 선택한 요소 자체가 삭제되는 것을 의미한다.
하위 요소 제거
선택한 요소에 포함된 모든 하위 요소도 함께 제거되며, 선택한 요소의 자식 요소, 자식의 자식 요소, 그 이하 수준의 모든 하위 요소가 제거된다.
이벤트 리스너 제거
remove() 함수를 사용하여 요소를 제거하면 해당 요소에 연결된 모든 이벤트 리스너도 함께 제거된다. 이로 인해 메모리 누수를 방지하고 자원을 효율적으로 관리하는 데 도움이 된다.
메모리 관리
선택한 요소와 해당 요소의 모든 하위 요소가 DOM에서 제거되므로 메모리에서도 해제된다.
예제 소스 코드
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(function () {
/**
* 데이터 리스트
*/
const dataList = [
{ name: 'red', data: 225 },
{ name: 'blue', data: 123 },
{ name: 'orange', data: 122 },
{ name: 'black', data: 191 },
{ name: 'white', data: 125 },
];
/**
* remove button click 이벤트
*/
$('#removeId').unbind('click').click(function () {
let html = '<tbody>';
dataList.forEach((item, index) => {
html += '<tr>';
html += ' <td>' + index + '</td>';
html += ' <td>' + item.name + '</td>';
html += ' <td>' + item.data + '</td>';
html += '</tr>';
});
html += '</tbody>';
// table tbody 요소 전체 remove
$('#dataTable tbody').remove()
// table append html
$('#dataTable').append(html);
});
});
</script>
<div>
<input type="button" value="Remove click" id="removeId">
</div>
<br>
<div>
<table id="dataTable" border>
<thead>
<tr>
<th>No</th>
<th>color</th>
<th>data</th>
</tr>
</thead>
</table>
</div>
<style>
table {
table-layout: fixed;
width : 500px;
}
</style>예제 소스 코드는 remove() 함수를 활용한 예제다.
table > tbody 하위에 tr 요소를 추가하기 전에 tbody를 먼저 생성해 주는 부분이 있는데, 여기서 empty() 함수와 다른 점이 empty()는 선택 요소의 하위 요소를 전부 삭제하는 기능이고, remove()는 선택 요소를 포함하여 전부 삭제를 하게 된다.
그렇기 때문에 tr 요소를 추가하기 전에 tbody를 먼저 추가해 줬다.
* empty
$('#dataTable tbody').empty().append(html);
* remove
// table tbody 요소 전체 remove
$('#dataTable tbody').remove()
// table append html
$('#dataTable').append(html);
실행 결과
실행 결과는 empty()와 동일하지만 처리하는 방식이 조금 다르다. 유사한 기능을 구현할 경우에는 둘 중에 아무거나 사용해도 상관없지만 개인적으로 empty() 처리 방식이 가독성이 좋아 많이 사용하고 있다.
DOM 요소를 비울 때의 주의사항
DOM 요소를 비우거나 삭제할 때 주의해야 할 사항들이 몇 가지 있다.
이벤트 리스너
요소에 연결된 이벤트 리스너가 있는 경우에는 해당 이벤트 리스너가 적절하게 제거되어야 하는데, 요소를 삭제하기 전에 이벤트 리스너를 확인하고 해제하는 것이 중요하다.
하위 요소
삭제하려는 요소에 하위 요소들이 있는지 확인해야 하며, 만약 하위 요소가 있다면 이들도 함께 삭제되어야 한다. 삭제된 요소와 하위 요소까지 삭제하고자 하는 요소가 삭제되는 것이 맞는지 확인하는 것이 중요하다.
메모리 누수
요소를 삭제하더라도 해당 요소에 연결된 자바스크립트 객체나 변수들이 메모리에 남아 있는지 확인해야 한다. 요소 삭제 후에는 관련된 자원들이 적절히 해제되어야 한다. 그렇지 않으면 메모리 누수가 발생해 서비스에 문제가 될 수 있다.
동적으로 추가된 요소
동적으로 추가된 요소들을 삭제할 때에는 해당 요소들이 존재하는지 먼저 확인해야 하며, 존재하지 않는 요소를 삭제하려고 시도하면 오류가 발생할 수 있다.
애니메이션 및 비동기 작업
요소를 삭제할 때 애니메이션 효과나 비동기 작업과 관련된 문제가 발생할 수 있다. 삭제 작업이 완료되기를 기다려야 하는 경우가 있으므로, 이러한 작업을 고려하여 코드를 작성해야 한다.
이렇게 다양한 주의사항들을 고려해서 요소를 비우거나 삭제하는 것이 중요하다. 그렇지 않으면 예기치 못한 오류가 잠재적인 오류가 계속해서 발생할 수 있다.
마무리
오늘은 이렇게 jQuery의 empty() 함수와 remove() 함수의 사용 방법과 차이를 정리해 봤다. DOM 요소를 비우는 것은 생각보다 중요한 작업이며, 정리한 내용과 같이 이벤트나 메모리, 리소스 등 생각하지 못한 부분에서 문제가 될 수 있다는 것을 알 수 있었다. 간단한 기능이지만 그만큼 기능에 대해서 깊이 있게 알고 사용한다면 훨씬 더 품질 좋은 서비스를 만들어 갈 수 있다.
* jQuery .append() prepend() 관련 링크
https://sancode.tistory.com/28
'javascript > jQuery' 카테고리의 다른 글
| jQuery 천단위 콤마 자동 적용하기 (input 활용) (0) | 2023.02.13 |
|---|---|
| jQuery attr(), prop() 차이점 알아보기! (0) | 2023.01.28 |
| jQuery 태그 요소를 조회하는 closest(), find() 함수를 알아보자 (0) | 2023.01.02 |
| jQuery .children() .parent() 배워보기! (0) | 2023.01.02 |
| [jQuery] .append() .prepend() 알아보자! (0) | 2022.12.31 |
