웹 애플리케이션에서는 대량의 데이터를 로딩하는 동안 사용자에게 로딩 상태를 알려주는 로딩 스피너가 필요할 때가 있습니다. 이번 글에서는 자바스크립트에서 Ternary 연산자를 활용하여 간단하게 로딩 스피너를 처리하는 방법에 대해 알아보겠습니다.

로딩 스피너 요구 사항

로딩 스피너 요구 사항은 다음과 같습니다.

1. 데이터가 로딩 중일 때는 로딩 스피너를 표시해야 합니다.
2. 데이터 로딩이 완료될 때는 로딩 스피너를 숨겨야 합니다.

HTML 구조

로딩 스피너를 표시할 요소가 필요합니다. 예를 들어 <div>를 사용하여 로딩 스피너를 감싸는 요소를 생성합니다. 로딩 스피너에는 CSS 클래스를 적용하여 스타일을 지정할 수 있습니다. 이 예제에서는 loading-spinner 클래스를 사용합니다.

<div id="loadingSpinner" class="loading-spinner"></div>

자바스크립트 코드

로딩 스피너를 처리하기 위해 자바스크립트 코드를 작성합니다. loadingSpinner 요소를 찾아서 스피너를 표시할지 숨길지 결정하는 코드를 작성합니다.

// loadingSpinner 요소 찾기
const loadingSpinner = document.getElementById('loadingSpinner');

// 데이터 로딩 중 여부에 따라 로딩 스피너를 표시하거나 숨기는 함수
function showLoadingSpinner(isLoading) {
  loadingSpinner.style.display = isLoading ? 'block' : 'none';
}

// 예시: 데이터 로딩 시작
showLoadingSpinner(true);

// 예시: 데이터 로딩 완료
showLoadingSpinner(false);

위 자바스크립트 코드에서는 showLoadingSpinner 함수를 선언하여 데이터 로딩 중 여부에 따라 loadingSpinner 요소를 표시하거나 숨깁니다. isLoading 매개 변수를 사용하여 로딩 중 여부를 전달합니다.

Ternary 연산자로 처리하기

Ternary 연산자를 사용하면 코드를 간결하게 작성할 수 있습니다. 아래 코드는 Ternary 연산자를 사용하여 showLoadingSpinner 함수를 수정한 예입니다.

function showLoadingSpinner(isLoading) {
  loadingSpinner.style.display = isLoading ? 'block' : 'none';
}

// 예시: 데이터 로딩 시작
loadingSpinner.style.display = 'block';

// 예시: 데이터 로딩 완료
loadingSpinner.style.display = 'none';

위 코드에서는 Ternary 연산자를 사용하여 isLoading 값이 true이면 display 속성을 'block'으로 설정하고, 그렇지 않으면 display 속성을 'none'으로 설정합니다.

결론

Ternary 연산자를 사용하면 자바스크립트에서 로딩 스피너를 처리하는 코드를 더 간결하게 작성할 수 있습니다. 로딩 스피너를 효율적으로 제어하여 사용자에게 원활한 사용 경험을 제공할 수 있습니다.

#javascript #로딩스피너