ViewComponent의 주요 이점은 다음과 같습니다.
ViewComponent의 핵심 이점
- 캡슐화: 로직, 스타일링, 마크업을 컴포넌트 내부에 통합하여 관리합니다.
- 테스트 용이성: 개별 컴포넌트 단위의 테스트를 통해 견고성을 확보합니다.
- 성능 향상: 부분 템플릿 대비 효율적인 렌더링과 내장 캐싱을 제공합니다.
- 유연성 및 재사용성: 기존 Rails 뷰에 쉽게 통합되며, 일관된 UI 요소를 반복적으로 활용할 수 있습니다.
ViewComponent 사용법
ViewComponent는 Rails 제너레이터를 통해 생성됩니다.
ruby
rails generate component Button label:string href:string theme:string
생성된 컴포넌트는 app/components에 위치하며, Ruby 클래스와 템플릿 파일로 구성됩니다.
- ApplicationComponent: 모든 컴포넌트의 공통 부모 클래스로, Devise 헬퍼나 URL 헬퍼 등 재사용 가능한 기능을 정의하는 데 활용됩니다.
- 속성 및 초기화:
initialize메서드를 통해 컴포넌트에 동적으로 데이터를 전달합니다. - 렌더링:
render헬퍼를 사용하여 컴포넌트를 렌더링하며, 블록 형태로 콘텐츠를 포함할 수 있습니다.ruby <%= render ButtonComponent.new(label: "새 글 작성", href: new_post_path) %> <%= render ButtonComponent.new(href: new_post_path) do %> <strong>시작하기</strong> <% end %> - 조건부 렌더링 (
render_on): 특정 조건에 따라 컴포넌트의 렌더링 여부를 제어할 수 있습니다. - 슬롯 (Slots):
renders_one및renders_many를 사용하여 컴포넌트 내부에 다른 컴포넌트나 콘텐츠 블록을 유연하게 삽입, 복잡한 UI 구조를 모듈화할 수 있습니다.
테스트 및 모범 사례
ViewComponent는 각 컴포넌트 생성 시 전용 테스트 파일을 제공하여 단위 테스트를 지원합니다.
모범 사례로는 컴포넌트 이름을 “무엇을 렌더링하는지”를 기준으로 지정하고, ApplicationComponent를 활용하여 공통 로직을 중앙 집중화하는 것이 권장됩니다. 또한, Rails 제너레이터를 적극 활용하고, ERB 외에 HAML, Slim 등 다양한 템플릿 엔진을 사용할 수 있습니다.