alpine.js는 가볍고 강력한 프론트엔드 프레임워크로, Vue.js에서 영감을 받아 만들어졌으며, 간단한 상호작용을 쉽게 구현할 수 있게 해준다. 그 중 자주 사용하는 기능이 바로 x-show이다.

x-show는 조건에 따라 엘리먼트의 style="display:none"을 적용하거나 제거하여 화면에서 보이거나 숨기도록 제어한다. 그러나 종종 다음과 같은 상황에 부딪힐 수 있다.

• x-show 값이 false인데 엘리먼트가 여전히 화면에 표시되는 경우

• x-show 값이 true인데도 엘리먼트가 보이지 않는 경우

이러한 현상이 발생할 때 어떻게 해결해야 하는지 살펴보자.

주된 원인은 CSS 스타일이 엘리먼트의 표시 여부를 결정하는 과정에서 alpine.js의 동작을 방해하는 경우다. 특히 CSS 클래스가 display:none을 직접 적용하고 있거나, 미디어 쿼리(@media) 등으로 특정 조건에서 자동으로 display:none이 적용될 수 있다.

예를 들어 다음과 같은 상황을 생각할 수 있다.

<div class="hidden" x-show="isVisible">
  보이거나 숨길 요소
</div>

이때 .hidden 클래스에 이미 CSS로 display:none이 설정되어 있다면, x-show가 정상적으로 동작하더라도 엘리먼트는 항상 보이지 않을 수 있다.

이 문제를 해결하기 위한 가장 간단한 방법은 엘리먼트가 가진 클래스 중 display:none이 설정된 클래스가 있는지 확인하고 이를 제거하거나 다른 방식으로 처리하는 것이다.

하지만 반응형 페이지나 미디어 쿼리(@media max-width)와 같은 다양한 스타일 정의를 가진 페이지라면, 단순히 클래스 제거가 쉽지 않을 수 있다. 이런 경우 x-if를 활용하는 방법을 추천한다.

x-if는 조건에 따라 엘리먼트를 아예 렌더링하거나 렌더링하지 않도록 결정하는 지시자다. 즉, DOM 자체에서 엘리먼트가 제거되거나 추가되기 때문에 CSS 클래스가 가진 스타일과 충돌하는 문제를 방지할 수 있다.

다음은 예제 코드다.

<template x-if="isVisible">
  <div class="responsive-element">
    조건에 따라 렌더링될 요소
  </div>
</template>

위와 같이 작성하면, 클래스가 가진 CSS에 의해 display:none이 적용되는 문제를 효과적으로 방지할 수 있다.

alpine.js를 사용할 때 x-show가 정상적으로 동작하지 않는다면 먼저 CSS 스타일과의 충돌 여부를 점검하자. 특히 반응형 스타일이나 특정 조건에 따라 스타일을 변경하는 경우라면, 클래스 제거가 어려울 수 있으므로 x-if를 적극 활용하여 보다 확실하게 문제를 해결할 수 있다.