많은 웹 애플리케이션에서 페이지 전환 처리는 중요한 부분입니다. 특히 자바스크립트를 사용하는 경우, 사용자의 행동에 따라 다른 페이지로 이동하는 기능을 구현해야 할 때가 많습니다.

이번 블로그에서는 자바스크립트의 특수한 연산자인 Ternary(삼항) 연산자를 사용하여 페이지 전환 처리를 할 수 있는 방법을 알아보겠습니다.

Ternary 연산자란?

Ternary 연산자는 조건문을 간단히 작성할 수 있게 해주는 연산자입니다. 조건식 ? true인 경우의 값 : false인 경우의 값 이라는 형태로 사용됩니다.

Ternary 연산자를 사용한 페이지 전환 처리 예제

아래 예제는 사용자가 클릭한 버튼에 따라 다른 페이지로 이동하는 기능을 Ternary 연산자를 사용하여 구현한 것입니다.

const button1 = document.querySelector("#button1");
const button2 = document.querySelector("#button2");

button1.addEventListener("click", () => {
    window.location.href = isUserLoggedIn() ? "/dashboard" : "/login";
});

button2.addEventListener("click", () => {
    window.location.href = isAdmin() ? "/admin" : "/dashboard";
});

function isUserLoggedIn() {
    // 사용자가 로그인되어 있는지 여부를 확인하는 로직
    // 로그인되어 있으면 true, 아니면 false를 반환
    // 이 부분은 실제 애플리케이션에 맞게 구현되어야 합니다.
}

function isAdmin() {
    // 사용자가 관리자인지 여부를 확인하는 로직
    // 관리자이면 true, 아니면 false를 반환
    // 이 부분은 실제 애플리케이션에 맞게 구현되어야 합니다.
}

위의 예제에서 button1과 button2는 사용자가 클릭할 수 있는 버튼 요소를 나타냅니다. 각 버튼에는 클릭 이벤트 리스너가 등록되어 있으며, 버튼을 클릭하면 해당하는 페이지로 이동하게 됩니다. Ternary 연산자를 사용하여 isUserLoggedIn()과 isAdmin() 함수의 반환값에 따라 페이지 전환 여부를 결정합니다.

예제에서는 간단한 예시로 isUserLoggedIn()과 isAdmin() 함수가 각각 사용자의 로그인 여부와 관리자 여부를 확인하는 로직을 가정했습니다. 실제 애플리케이션에서는 이러한 함수들을 실제 로직에 맞게 구현해야 합니다.

마무리

이번 포스트에서는 Ternary 연산자를 사용하여 자바스크립트에서 페이지 전환 처리를 하는 방법을 알아보았습니다. Ternary 연산자는 조건문을 간단하게 작성할 수 있는 장점이 있어 페이지 전환과 같은 작업에 유용하게 사용될 수 있습니다.

다양한 상황에서 Ternary 연산자를 적절하게 활용하여 코드를 간결하고 가독성 있게 작성해보세요.

#자바스크립트 #페이지전환