phoenix의 component를 작성하다보면 for, if 문을 사용하는 경우가 많은데 tag 뒤에 :for, :if 를 사용해서 간단하게 줄일 수 있다.

tailwind css를 사용한 class도 경우에 따라 추가적인 class를 주고 싶을 때가 있는데 core_component.ex를 살펴보다 class에 list를 줄 수 있다는 것, 그리고 list 내부에 false인 경우 무시된다는 것을 알게 되었다.

위에서 말한 두가지 요소를 합치면 여러 사용자들을 경우에 따라 다른 class로 표시하고자 하는 다음의 소스를

<%= for who <- @duty do %>
  <%= if @mark && @user.name == who do %>
    <div class={"text-sm w-1/2 text-center h-1/6 " <> @mark_class}>
      <%= who %>
    </div>
  <% else %>
    <div class="text-sm w-1/2 text-center h-1/6">
      <%= who %>
    </div>
  <% end %>
<% end %>

아래와 같이 줄일 수 있다

<div :for={who <- @duty} class={["text-sm w-1/2 text-center h-1/6 ", (@mark && @user.name==who) && @mark_class]}>
  <%= who %>
</div>