svelte 컴포넌트 재사용
컴포넌트는 이제 프론트엔드 개발환경에서 널리 쓰이는 개념입니다. 보통은 app의 구성요소를 분리하여 개발 및 관리를 용이하게 하기 위해 사용되는데요. 예를 들어 화면을 구성하는 header, footer, body, list 등을 각각의 컴포넌트로 만들어 배치하여 사용하는 것이 대표적인 사용예입니다.
그리고 컴포넌트의 또다른 큰 기능으로 바로 재사용성이 있습니다. 기본 예제에서는 이런 재사용이 가능한 기능을 만들어 사용하는 경우가 드물지만, app의 규모가 조금만 커져도 이 재사용성을 생각해야만 하는 경우가 종종 발생합니다.
그래서 이번 예제에서는 컴포넌트의 재사용에 초점을 맞춰서 진행해 보도록 하겠습니다.
강좌에서 만들어볼 컴포넌트는 modal popup 이 되겠습니다. 특정 버튼이나 액션을 주면 그에 맞는 내용의 팝업창이 화면에 나타나는 기능을 가진 컴포넌트를 만들어 보도록 하겠습니다.
우선 아래의 modal.svelte 의 소스는 아래와 같습니다.
이 파일에서 가장 기본이 되는 요소는 modalActive 라는 props가 되겠습니다. modal 창은 이 modalActive가 true일 때만 나타나고 그렇지 않을 경우는 화면에 나타나지 않는 구조를 가집니다. 재사용 컴포넌트를 만들때 가장 핵심이 되는 부분은 필요한 props를 적절하게 정의하는 것입니다. 그리고 props의 경우 컴포넌트를 사용할 때 값을 값을 지정하지 않을 경우를 대비해서 기본값을 설정하는 것을 추천드립니다. 위의 경우 modalActive는 기본적으로false를 기본값으로 하고 있습니다.
그리고 이 해당 팝업창의 내용의 경우는 prop가 아닌 slot을 사용하여 표시되도록 했습니다. 물론 내용의 경우도 prop로 넘길 수 있지만, 계속 반복적으로 사용되는 html영역의 경우 slot을 사용하는 것이 훨씬 효율적일 때가 많습니다. 위의 예제의 경우도 내용이 들어가는 부분은 단순히 txt형식의 데이터일 수 있지만, 간단하게 다양한 html태그를 이용해 내용을 채울 수도 있도록 이부분을 slot을 이용해 구현했습니다.
자 이제 이 만들어진 modal.svelte를 다른 컴포넌트에서 어떻게 사용할 수 있는지 보도록 하겠습니다. 다음은App.svlete 소스입니다.
처음할 일은 사용할 modal.svelte를 import 해줍니다. 그리고 예제에서는 각각의 2개의 다른 modal창을 사용해 볼 것입니다. 그러기 위해서 준비한 2개의 modal 창은 별개로 작동해야 하므로 각각 다른 modalActive state를 만들어 줍니다.
그리고 import 시킨 modal 컴포넌트를 2개 만들어 줍니다. 이때 중요한 것은 컴포넌트로 modalActive를 넘겨주는 것입니다 여기서는 bind를 사용할텐데요. bind를 이용해 app.svelte의 modalActive1 state와 modal.svelte의 modalActive props를 bind:modalActive={modalActive1} 이런 식으로 양방향 바인딩 되게 만들어 세팅해보겠습니다. 바인딩을 사용하면 시키면 부모와 자식 컴포넌트 어딘가에 값이 변경되면 양쪽모두 변경된 값으로 동기화 된다고 보시면 됩니다.
그리고 컴포넌트 안에 준비된 slot인 header, content를 각각 채우도록 하겠습니다. 첫번째 모달의 경우 content에 <b> CONTENT 1 </b> 이런식으로 추가적인 태그를 사용한 것을 볼 수 있는데요. 위에서도 말했지만, 이 내용들을 props로 넘기면 이렇게 원하는 태그를 넘겨주는 것이 부자연 스러울 수 있습니다. 하지만 slot으로 설정하고 내용을 채우면 자연스럽게 추가적인 태그를 사용하기가 쉽다는 것을 알 수 있습니다.
그리고 이제 버튼 2개를 만들어 state인 modalActive1, modalActive2를 변경시킬 수 있도록 만들어 보겠습니다.
이제 각 버튼을 클릭해주면 state값이 바뀌고 그에 맞게 modal popup창이 나타나고 사라지는 것을 볼 수 있을 것입니다.
보시는 것 처럼 각각의 modal이 잘 작동되는 것을 볼 수 있습니다.
이런식으로 app에서 계속해서 반복되어 사용되는 부분들을 분리해 컴포넌트로 만들어 사요할 수 있습니다. 이 작업의 핵심은 컴포넌트에 어떤 props 를 전달할거고, 그리고 디자인적인 html영역은 어떻게 slot으로 만들지를 잘 생각해 설계하는 것입니다. svelte의 기본인 state, props 그리고 slot을 잘 활용하면 좀 더 효율적인 app 개발을 하실 수 있으실 것으로 생각됩니다.
svelte 강좌는 아래 참조!!
