자바스크립트에서 스타일 토글 처리는 특정 요소의 스타일을 토글하여 보이거나 숨길 수 있는 기능을 말합니다. 예를 들어, 버튼을 클릭하면 해당 요소의 배경색을 바꾸는 것과 같은 동작을 의미합니다. 이번 글에서는 Nullish Coalescing 연산자를 사용하여 자바스크립트에서 스타일 토글을 처리하는 방법에 대해 알아보겠습니다.

Nullish Coalescing(널 병합 연산자)

Nullish Coalescing은 자바스크립트의 연산자 중 하나로, null 또는 undefined인 경우 대체값을 반환하는 기능을 수행합니다. 이를 통해 쉽게 스타일 토글을 처리할 수 있습니다. Nullish Coalescing 연산자는 ‘??’로 나타내며 다음과 같은 형태를 갖습니다:

const result = value1 ?? value2;

위 코드에서 value1이 null 또는 undefined인 경우 value2를 반환하고, 그렇지 않은 경우 value1을 반환합니다.

스타일 토글 처리 예시

다음은 Nullish Coalescing 연산자를 사용하여 스타일 토글을 처리하는 간단한 예시 코드입니다:

const element = document.getElementById('toggle-btn');
let isToggled = false;

element.style.backgroundColor = isToggled ? 'red' : 'blue';

element.addEventListener('click', () => {
  isToggled = !isToggled;
  element.style.backgroundColor = isToggled ? 'red' : 'blue';
});

위 코드에서는 ‘toggle-btn’이라는 id를 가진 요소의 배경색을 토글합니다. 초기값으로는 파란색(background-color: blue)을 설정하고, 클릭 이벤트가 발생할 때마다 배경색이 빨간색으로 변경되거나 파란색으로 되돌아가도록 해줍니다.

더 나은 스타일 토글 처리를 위해 클래스 사용하기

스타일 토글 처리를 위해 Nullish Coalescing 연산자를 사용하는 것은 간단한 상황에서는 유용하지만, 복잡한 스타일 변경이 요구되는 경우에는 클래스를 사용하는 것이 더 나은 방법입니다. 클래스를 사용하면 스타일 변경 로직을 분리하여 코드를 훨씬 깔끔하게 구성할 수 있습니다. 다음은 클래스를 사용하여 스타일 토글을 처리하는 예시 코드입니다:

const element = document.getElementById('toggle-btn');
element.classList.add('blue-background');
let isToggled = false;

element.addEventListener('click', () => {
  isToggled = !isToggled;
  element.classList.toggle('red-background');
  element.classList.toggle('blue-background');
});

위 코드에서는 ‘toggle-btn’이라는 id를 가진 요소에 ‘blue-background’ 클래스를 추가하여 초기 배경색을 파란색으로 설정합니다. 클릭 이벤트가 발생할 때마다 ‘red-background’ 클래스와 ‘blue-background’ 클래스를 토글하여 배경색을 변경합니다.

결론

이번 글에서는 Nullish Coalescing 연산자를 사용하여 자바스크립트에서 스타일 토글 처리하는 방법에 대해 알아보았습니다. 간단한 상황에서는 Nullish Coalescing 연산자를 사용하여 스타일 토글을 처리할 수 있지만, 복잡한 경우에는 클래스를 사용하는 것이 더 권장되는 방법입니다. 이를 통해 코드를 더 간결하고 유지보수하기 쉽게 구성할 수 있습니다.

#Javascript #NullishCoalescing #StyleToggle