자바스크립트에서 Ternary 연산자를 활용한 무한 스크롤

08 Nov 2023

javascript

요즘 웹 페이지에서 자연스러운 사용자 경험을 위해 무한 스크롤 기능이 많이 사용됩니다. 무한 스크롤은 페이지의 맨 아래에 도달했을 때 자동으로 콘텐츠를 로드하여 사용자가 페이지를 넘김 없이 계속해서 스크롤할 수 있는 기능입니다. 이러한 기능을 구현하기 위해 자바스크립트에서 Ternary 연산자를 활용할 수 있습니다.

Ternary 연산자란?

Ternary 연산자는 세 개의 표현식으로 구성된 조건 연산자로, 조건을 확인하고 참 또는 거짓에 따라 특정 표현식을 반환합니다. 일반적으로 if-else 문을 간결하게 표현할 때 사용됩니다. Ternary 연산자의 문법은 다음과 같습니다.

 condition ? expression1 : expression2

condition은 평가되는 조건식입니다. condition이 참이면 expression1이 반환되고, 거짓이면 expression2가 반환됩니다.

무한 스크롤 구현하기

무한 스크롤을 구현하기 위해서는 먼저 스크롤 이벤트를 감지해야 합니다. 다음은 스크롤 이벤트를 감지하여 페이지의 하단에 도달하면 데이터를 로드하는 코드입니다.

 window.addEventListener('scroll', function() {
    // 스크롤 위치 계산
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
    var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
    
    // 페이지 하단에 도달하면 데이터 로드
    if (scrollTop + clientHeight >= scrollHeight) {
        // 데이터 로드 로직
    }
 });

이제 Ternary 연산자를 활용하여 스크롤 이벤트가 발생할 때마다 조건을 확인하고 데이터를 로드할지 결정하는 코드를 작성해 보겠습니다. Ternary 연산자를 사용하면 if-else 문을 간결하게 표현할 수 있습니다.

 window.addEventListener('scroll', function() {
    // 스크롤 위치 계산
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
    var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
    
    // 스크롤 이벤트 발생시 데이터 로드 여부 결정
    scrollTop + clientHeight >= scrollHeight ? loadData() : null;
 });

 function loadData() {
    // 데이터 로드 로직
    // 페이지에 필요한 데이터를 가져와서 화면에 추가한다.
 }

스크롤 이벤트가 발생하면 Ternary 연산자를 사용하여 조건을 확인하고 loadData() 함수를 호출합니다. 만약 스크롤이 페이지의 하단에 도달하지 않으면 null을 반환합니다.

이와 같이 Ternary 연산자를 활용하면 무한 스크롤 기능을 간단하게 구현할 수 있습니다.

마무리

자바스크립트의 Ternary 연산자를 사용하여 무한 스크롤 기능을 구현할 수 있습니다. Ternary 연산자를 사용하면 if-else 문을 간결하게 표현할 수 있으며, 코드의 가독성을 향상시킬 수 있습니다. 이러한 무한 스크롤 기능은 사용자에게 더 나은 사용자 경험을 제공하는 데 도움이 됩니다.

#javascript #무한스크롤