Rails class_names 메소드 소개

Rails 6.1의 새로운 기능은 class_names 모듈에서 ActionView::Helpers::TagHelper 라는 메서드입니다. 이 편리한 새 보기 도우미는 Vue.js에서 Rails로 가장 좋아하는 기능 중 하나를 제공합니다.

Vue.js(또는 클래스 이름 라이브러리를 통한 React)에서 다음과 같이 할 수 있습니다.

<div class="{item: true, item__complete: item.complete, item__over_due: !item.complete && item.overDue }">
  {{ item.name }}
</div>

적절한 CSS 클래스와 항목 개체가 있다고 가정하면 다음과 같이 표시됩니다.

<!-- item.complete == false -->
<div class="item">Incomplete Item</div>

<!-- item.complete == false && item.overDue == true -->
<div class="item item__over_due">Incomplete Item</div>

<!-- item.complete == true && item.overDue == true -->
<div class="item item__complete">Complete Item</div>

분명히 이것은 지나치게 단순화된 예이지만 아이디어를 얻을 수 있습니다. Rails에서 동일한 작업을 수행하려면 다음과 같은 것이 필요합니다.

<%= tag.div class: "item #{item.completed? ? 'item__complete' : ''} #{!item.completed? && item.over_due? ? 'item__over_due' : ''}" do %>
  <%= item.name %>
<% end %>

그러나 class_names를 도입하면 이를 단순화하고 Vue와 매우 유사하게 작동합니다. 이제 다음과 같이 할 수 있습니다.

<%= tag.div class: class_names(item: true, item__complete: item.completed?, item__over_due: !item.completed? && item.over_due?) do %>
  <%= item.name %>
<% end %>

또한 class_names는 혼합 인수 유형을 사용할 수 있으므로 위의 작업을 다음과 같이 수행할 수도 있습니다.

<%= tag.div class: class_names("item", { item__complete: item.completed?, item__over_due: !item.completed? && item.over_due? }) do %>
  <%= item.name %>
<% end %>

참고: 위의 예는 설명을 위해 명시적으로 class_names를 호출합니다. tag (및 content_tag ) 메서드는 이미 후드 아래에서 class_names 를 사용하므로 위의 작업은 실제로 다음과 같이 수행할 수 있습니다.

<%= tag.div class: ["item", { item__complete: item.completed?, item__over_due: !item.completed? && item.over_due? }] do %>
  <%= item.name %>
<% end %>

저는 이것을 매우 좋아하며 Rails에서 더 복잡한 조건부 CSS 클래스 목록을 훨씬 쉽고 깔끔하게 만들 수 있습니다. class_names는 token list의 별칭이며 해당 문서here를 볼 수 있습니다.