Action View 개요 — 응답 HTML을 만드는 뷰 계층

Action View 개요 — 응답 HTML을 만드는 뷰 계층

콘트롤러가 데이터를 준비했다면, 그 데이터를 실제로 사용자에게 보여줄 HTML로 바꿔주는 일은 뷰의 몫이에요. Action View는 Rails에서 이 뷰 계층을 담당하는 컴포넌트로, 템플릿 안에 루비 코드를 섞어 동적인 화면을 만들고, 다양한 헬퍼로 반복적인 마크업을 줄여줘요. 콘트롤러가 요청을 처리해 뷰에 전달하면, 뷰가 응답 페이지의 최종 모습을 완성해요.

출처: Action View Overview

본문

뷰 템플릿의 위치와 구조

루트에서 render로 처리하는 요청은 기본적으로 액션과 같은 이름의 템플릿을 찾아요. 템플릿은 app/views/<콘트롤러명>/ 폴더에 액션 이름으로 저장해요. 예를 들어 ArticlesController#index는 app/views/articles/index.html.erb를 렌더링해요.

콘트롤러에서 만든 인스턴스 변수(@articles 등)는 뷰에서 그대로 접근할 수 있어요. 이 연결이 콘트롤러와 뷰가 데이터를 주고받는 기본 방식이에요.

ERB 템플릿

Rails의 기본 템플릿 언어는 **ERB(Embedded Ruby)**예요. HTML 안에 루비 코드를 두 종류로 섞어 넣어요.

  • <% %> — 결과가 출력되지 않는 루비 코드. 반복·조건에 쓰여요.
  • <%= %> — 결과가 HTML로 출력되는 루비 코드.
<% @articles.each do |article| %>
  <h2><%= article.title %></h2>
  <p><%= article.body %></p>
<% end %>

<%와 <%=의 차이만 기억하면 되는데, 등호가 붙으면 화면에 값이 나타나고 없으면 로직만 실행돼요.

로컬 변수와 파셜(partial)

뷰의 일부를 재사용하려면 파셜로 분리할 수 있어요. 파일 이름을 밑줄(_)로 시작하면 파셜로 인식돼요.

<%= render "shared/header" %>

파셜에 데이터를 넘길 때는 로컬 변수로 전달해요.

<%= render "article", article: @article %>

파셜 파일(_article.html.erb) 안에서는 article 로컬 변수로 해당 객체를 써요. 같은 화면의 반복되는 조각을 파셜로 빼면 유지보수가 훨씬 쉬워져요.

레이아웃

여러 페이지가 공유하는 공통 틀은 레이아웃으로 관리해요. 기본 레이아웃은 app/views/layouts/application.html.erb이고, 각 뷰의 내용은 yield 자리에 들어가요.

<!DOCTYPE html>
<html>
  <head>
    <title>My Blog</title>
  </head>
  <body>
    <%= yield %>
  </body>
</html>

콘트롤러마다 다른 레이아웃을 쓰고 싶으면 액션 안에서 layout 메서드를 지정하거나, render layout: "admin"처럼 명시할 수 있어요.

헬퍼(helpers)

뷰에서 반복되는 로직은 헬퍼로 추출해요. app/helpers/에 있는 모듈의 메서드는 뷰에서 바로 호출할 수 있어요. 예를 들어 게시글 글자 수를 다듬는 헬퍼를 만들면 이렇게 써요.

module ArticlesHelper
  def preview(text, length = 100)
    truncate(text, length: length)
  end
end

<p><%= preview(article.body) %></p>

날짜 포맷, 링크 생성, 이미지 태그 같은 잦은 작업은 Rails가 기본으로 제공하는 헬퍼가 이미 많아요. 이들을 함께 쓰면 마크업을 손으로 일일이 쓰지 않아도 돼요.

폼 헬퍼로 HTML 폼 만들기

폼은 손으로 쓰면 제어할 필드가 많아 지루하고 오류도 잦아요. form_with 같은 폼 헬퍼가 이 복잡함을 처리해줘요. 모델을 알면 경로와 필드 이름을 자동으로 만들어주죠.

<%= form_with model: @article do |form| %>
  <%= form.text_field :title %>
  <%= form.text_area :body %>
  <%= form.submit %>
<% end %>

이 템플릿을 렌더링하면 <form>과 입력 필드, 제출 버튼까지 포함된 완전한 HTML 폼이 생성돼요. 컬럼명과 파라미터 구조가 일치해서 서버 쪽도 자연스럽게 이어져요.

더 알아보기 (Learn more)