재사용 가능한 컴포넌트를 효과적으로 구축하기 위해서는 먼저 애플리케이션 구조를 분석하여 공통된 기능 패턴과 반복되는 코드 인스턴스를 식별하는 것이 중요합니다. 뷰 템플릿에서 공통 HTML 요소나 폼 등을 찾아 모듈화할 영역을 파악할 수 있습니다.
ViewComponent는 Rails에서 UI 컴포넌트를 생성하기 위한 강력한 도구입니다.
ViewComponent 사용법
- 설치 및 설정:
Gemfile에view_component젬을 추가하고bundle install을 실행하여 설치합니다. - 컴포넌트 생성:
bin/rails generate component [ComponentName] [arguments]명령어를 사용하여 컴포넌트를 생성합니다. 이 명령은 컴포넌트의 로직을 담는.rb파일과 HTML/CSS 코드를 포함하는.html.erb파일을 생성합니다. - 컴포넌트 구조:
ComponentNameComponent.rb:ViewComponent::Base를 상속받으며, 컴포넌트의 초기화 로직과 데이터를 처리합니다. 예를 들어,initialize(nav:)와 같이 인자를 받아 인스턴스 변수로 저장할 수 있습니다.ComponentNameComponent.html.erb: 실제 UI 마크업과 스타일을 포함하며,.rb파일에서 정의된 인스턴스 변수에 접근하여 동적인 콘텐츠를 렌더링합니다.
- 컴포넌트 렌더링: 뷰 파일(예:
application.html.erb또는index.html.erb)에서<%= render ComponentNameComponent.new(arg: @value) %>형식으로 컴포넌트를 호출하여 렌더링합니다.
예시 컴포넌트
- NavigationComponent: 웹 페이지 상단에 표시되는 내비게이션 바를 구현합니다.
- ItemCardComponent: 데이터베이스에서 가져온 항목(예: 제품)의 제목과 설명을 표시하는 카드 형태의 UI를 구현합니다.
- BannerComponent: 사용자에게 특정 정보(제목, 메시지)를 전달하는 배너를 구현합니다.
재사용 가능한 UI 컴포넌트 개발 모범 사례
- 단일 책임 원칙: 각 컴포넌트가 명확하고 단일한 책임을 가지도록 설계하여 이해와 사용을 용이하게 합니다.
- Props 활용: 컴포넌트의 유연성과 재사용성을 높이기 위해
props(인자)를 통해 다양한 유형의 데이터를 전달합니다. - 관심사 분리: Ruby 로직은
.rb파일에, 뷰 로직은.html.erb파일에 분리하여 코드를 깔끔하게 유지하고 오류 식별을 용이하게 합니다. - 컴포넌트별 스타일링: CSS 스타일을 특정 컴포넌트 파일 내에 포함하여 코드의 응집도를 높입니다.