더북(TheBook)

4.10 {@html}로 돔에 HTML 엘리먼트 생성하기

스벨트는 데이터를 HTML로 표현하기 위한 네 가지 블록 표현식(#if, #each, #await, #key)을 제공합니다. 네 가지 방법을 사용해서 돔(DOM)에 데이터를 표현했습니다.

HTML로 된 문자열을 텍스트가 아닌 HTML 엘리먼트로 생성해서 돔에 추가하는 방법도 제공합니다. 바로 {@html 표현식}입니다.

일반적으로는 게시판의 콘텐츠를 보여주는 방법으로 사용할 수 있습니다. 간단한 예제로 확인해보겠습니다. svelte.dev 웹 사이트에서 REPL의 App.svelte을 열고 다음과 같이 작성하세요.

REPL의 App.svelte 
<script>
    // 게시글 형태의 JSON 정의
    var post = {
        title: "가장 빨리 만나는 스벨트",
        content: "<span style='color:red'>스벨트</span>는 정말 <b>재미있어요</b>"
    }
</script>

<div>
    <h1>{post.title}</h1> <!-- 일반 출력 -->
    {@html post.content}  <!-- {@html} 표현식 사용하여 출력 -->
</div>
신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.