Rails Helpers 및 Stimulus로 경량 구성 요소 구축

Custom Railshelpers 모듈은 종종 간과되지만 경량 구성 요소를 구축하고 Stimulus 컨트롤러에서 상용구를 줄이는 훌륭한 옵션이 될 수 있습니다.

Stimulus의 좋은 점 중 하나는 마크업 속성을 읽는 것만으로도 기능을 빠르게 유추할 수 있지만, 몇 가지 값과 작업이 있는 구성 요소의 경우 일부 구현 세부 정보를 숨기는 이점이 있습니다.

my에서 예를 들어 보겠습니다.

<div class="inline-block"
  data-controller="hovercard"
  data-hovercard-url-value="<%= hovercard_shoe_path(shoe) %>"
  data-action="mouseenter->hovercard#show mouseleave->hovercard#hide"
>
  <%= link_to shoe.name, shoe, class: "branded-link" %>
</div>

hovercard_controller는 url 값으로 전달되어야 하며 호버에서 카드를 표시하고 숨기기 위한 두 가지 작업이 추가되어야 합니다. 컨트롤러는 앱에서 원하는 각 유형의 호버 카드에 대해 스타일을 지정하고 사용자 정의할 수 있는 링크를 감싸고 있습니다.

컨트롤러를 사용하는 곳이 몇 군데밖에 없다면 큰 문제가 되지 않습니다. 그러나 점점 더 많은 유형의 호버 카드를 원하면 고유한 Rails 헬퍼를 추가해 보십시오.

용법

app/helpers 폴더의 모듈은 보기에서 사용할 수 있도록 자동으로 제공됩니다.

# app/helpers/hovercard_helper.rb
module HovercardHelper

  # Use a helper to avoid repeating Stimulus controller attributes
  def hovercard(url, &block)
    content_tag(:div,
      "data-controller": "hovercard",
      "data-hovercard-url-value": url,
      "data-action": "mouseenter->hovercard#show mouseleave->hovercard#hide",
      &block)
  end

  # Build your own light-weight "components"
  def repo_hovercard(repo, &block)
    hovercard hovercard_repository_path(repo), &block
  end

  def user_hovercard(user, &block)
    hovercard hovercard_user_path(user), &block
  end
end

도우미를 사용하면 구현 세부 사항을 추상화하기 위해 Ruby에서 자체 "구성 요소"를 만들 수 있습니다. 그리고 Ruby blocks 의 강력한 기능 덕분에 용도별로 맞춤화할 수 있는 유연한 구성 요소를 만들 수 있습니다.

<!-- app/views/timeline.html.erb -->

<%= user_hovercard(@user) do %>
  <%= link_to @user.username, @user %>
<% end %>

<%= repo_hovercard(repository) do %>
  <div class="flex items-center space-x-2">
    <svg></svg> <!-- Some icon -->
    <%= link_to repository.name, repository %>
  </div>
<% end %>

예를 들어 repo_hovercard 모델과 렌더링할 블록을 수락하는 Repository 도우미를 빌드할 수 있습니다. 우리는 페이지 컨텍스트를 기반으로 표시되는 내용을 완전히 제어할 수 있지만 Stimulus 이벤트를 올바르게 연결하는 것에 대해 걱정하고 싶지 않습니다.

그리고 Stimulus 컨트롤러를 변경하려는 경우 앱의 여러 보기에 분산되지 않고 모두 한 지점에 있습니다.

추가 리소스

레일스 API: Helpers