Documentation

커스텀 컴포넌트

반복되는 UI 를 재사용 가능한 컴포넌트로 만들기

3 min read

같은 모양의 UI 가 여러 곳에 반복된다면, 그것을 커스텀 컴포넌트(Custom Component) 로 만들어 재사용할 수 있습니다. 한 번 만들어 두면 여러 Page 에서 가져다 쓰고, 원본을 고치면 모든 곳에 한 번에 반영됩니다.

컴포넌트 만들기

두 가지 방법이 있습니다.

  • 추가 메뉴에서 Add Component 를 실행해 빈 컴포넌트를 만든 뒤 디자인합니다.
  • Page 에서 디자인하던 중 재사용할 부분을 선택하고 InspectorCreate Component 를 누르면, 그 자리에서 바로 커스텀 컴포넌트가 됩니다.

재사용과 Override

만든 컴포넌트는 Component Library 에서 확인할 수 있고, Drag and Drop 으로 Page 에 올려 사용합니다. 이렇게 재사용된 컴포넌트를 Instance 라고 부릅니다.

Instance 의 세부 속성은 대부분 Override 할 수 있습니다. 즉 공통 디자인은 원본을 따르되, 인스턴스마다 텍스트나 색상 등 일부만 다르게 지정할 수 있습니다.

원본 컴포넌트의 디자인은 Page 목록에서 언제든 바꿀 수 있습니다. 원본을 바꾸면 이미 추가된 모든 Instance 에 즉시 반영되며, 각 Instance 에서 Override 한 값은 그대로 유지됩니다.

Template Component

Layerz 는 바로 쓸 수 있는 내장 Template 을 제공합니다. 추가 메뉴의 Import Component… 에서 등록된 Template 을 골라 곧바로 커스텀 컴포넌트로 만들고 원하는 대로 수정해 사용할 수 있습니다.

일관성을 유지하고 싶은 반복 UI 는 커스텀 컴포넌트로 만드세요. List 의 셀 디자인을 컴포넌트로 만들어 두면 데이터 바인딩과 함께 깔끔하게 관리할 수 있습니다.