[Svelte] Style Class 지시어 바인딩

안녕하세요. J4J입니다.

 

이번 포스팅은 style을 적용시킬 수 있는 class 지시어 바인딩에 대해 적어보는 시간을 가져보려고 합니다.

 

 

 

Style Class 지시어 바인딩

 

화면을 개발하다 보면 요소마다 스타일을 적용하기 위해 html 태그들에 class를 사용하는 경우가 있습니다.

 

일반적으로 class가 사용될 경우 적용될 style을 정의하고 다음과 같이 사용하고는 합니다.

 

<div class="my-style" />

 

 

 

 

또한 개발하다 보면 특정 경우에만 style이 적용되게 해야 하는 상황도 발생됩니다.

 

react로 개발할 때는 보통 3항 연산자를 이용하여 다음과 같이 코드를 작성하고는 했습니다.

 

<div class={toggle ? myStyle : {}} />

 

 

반응형

 

 

하지만 svelte에서는 3항 연산자를 사용하지 않고 class 지시어 바인딩을 이용하여 보다 깔끔하게 코드를 작성할 수 있습니다.

 

관련된 예시 코드를 작성해보겠습니다.

 

<script>
	let toggle = false;
	$: box = toggle; // box값을 toggle값과 반응성을 띄며 동일하게 하기
</script>

<main>
	<!-- style box가 항상 적용 -->
	<div class="box">
		<h2>current toggle is {toggle}</h2>
		<button on:click={() => toggle = !toggle}>Toggle</button>
	</div>

	<!-- toggle이 true일때만 style box 적용 -->
	<div class={toggle ? 'box' : ''}>
		<h2>3항 연산자 (toggle)</h2>
	</div>

	<!-- toggle이 true일때만 style box 적용 -->
	<div class:box={toggle}>
		<h2>Class 지시어 바인딩 (toggle)</h2>
	</div>

	<!-- box가 true일때만 style box 적용 -->
	<div class:box={box}>
		<h2>Class 지시어 바인딩 (box)</h2>
	</div>

	<!-- box가 true일때만 style box 적용 -->
	<div class:box>
		<h2>Class 지시어 바인딩 생략 (box)</h2>
	</div>
</main>

<style>
	.box {
		border-bottom: 6px solid orange;
		margin-bottom: 10px;
	}
</style>

 

 

 

위의 코드를 보시면 3항 연산자보다 바인딩을 하는 것이 코드가 더 깔끔해진다는 것을 확인할 수 있고 또한 style명과 바인딩되는 변수의 명이 같을 경우는 생략까지도 가능한 것을 볼 수 있습니다.

 

그리고 코드를 실행하면 다음과 같이 정상적으로 동작되는 것을 볼 수 있습니다.

 

실행 화면 (toggle = false)

 

728x90

 

실행 화면 (toggle=true)

 

 

 

개인적으로 3항 연산자를 이용하는 것은 깔끔하게 사용되지 않아서 좋지 않게(?) 보고 있었는데 svelte에서는 바인딩을 통해 정말 필요한 값만 입력하여 깔끔하게 작성할 수 있어서 사소하지만 마음에 들었던 기능입니다.

 

코드를 간결하게 작성하는 것을 원하시는 분들은 바인딩을 통해 작성하는 것을 추천드립니다.

 

 

 

 

 

 

이상으로 style을 적용시킬 수 있는 class 지시어 바인딩에 대해 간단하게 알아보는 시간이었습니다.

 

읽어주셔서 감사합니다.