Svelte 컴포넌트에 HTML TAG를 그대로 전달해 주고 싶은 경우 있으시죠? 그럴 때엔 slot tag를 이용해 주시면 됩니다.
slot tag를 사용하여 tag 전달하는 방법
컴포넌트 안에 들어갈 내용을 props를 통해서 전달하지 않고 그대로 tag를 모두 전달하고 싶다면, slot을 사용하면 됩니다.
예를 들어, 버튼을 하나 만든다고 가정해 보겠습니다. main.svelte에서 Button 컴포넌트를 이용하는 경우를 두 가지 살펴보겠습니다.
props 이용하기
우선 아래와 같이 props로 전달하는 방식입니다. props를 통해서 전달하기 좋은 것은 상태 값일 것입니다. 대신에 props를 통해서 특정 태그를 전달하거나 하기는 적절하지 않습니다.
<PushButton name="확인하기"/>이 경우에는 다음과 같이 전달받은 props를 원하는 곳에 출력하게 하면 되겠죠.
<script>
export let name;
</script>
<button>{name}</button>slot 이용하기
아래와 같이 태그 사이에 TAG를 적어주고 싶은 경우에 slot을 이용하시면 됩니다.
<PushButton><div>확인하기</div></PushButton>PushButton 컴포넌트에서 slot 태그를 사용해서 처리해 주시면 됩니다. 이 경우는 아래와 같이 slot을 이용해서 작성할 수 있습니다.
<button><slot/></button>요약
경우에 따라 적절한 방법을 사용하면 되겠습니다. 그리고 본인이 더 선호하는 방법이 있다면 양자택일이 가능할 땐 원하는 방식을 선택하셔도 되겠죠. 하지만 그보다도 함께 일하는 조직에 코딩 컨벤션이 있다면 그걸 따르는 게 우선이겠죠? 서로 약속을 지키면 작업이 훨씬 수월해지고 디버깅 하기도 용이해집니다.
여하튼 항상 개발자는 고민하는 자리에 있게 됩니다. 어떤 것이 더 나을지도 고민해야 하고, 우리 팀의 약속도 생각해야하죠. 즐거운 개발 하시길 바랍니다.