액션 뷰 개요
이 가이드를 읽고 나면 다음을 알 수 있습니다:
- 액션 뷰가 무엇이며 Rails에서 어떻게 사용하는지
- 템플릿, 부분 템플릿, 레이아웃을 가장 잘 사용하는 방법
- 지역화된 뷰를 사용하는 방법
액션 뷰란 무엇인가?
액션 뷰는 MVC의 V(View)입니다. 액션 컨트롤러와 액션 뷰는 웹 요청을 처리하는 데 함께 작동합니다. 액션 컨트롤러는 모델 계층(MVC의)과 통신하고 데이터를 검색하는 데 관심이 있습니다. 그런 다음 액션 뷰는 해당 데이터를 사용하여 웹 요청에 대한 응답 본문을 렌더링할 책임이 있습니다.
기본적으로 액션 뷰 템플릿(단순히 “뷰"라고도 함)은 Embedded Ruby(ERB)를 사용하여 작성되며, 이를 통해 HTML 문서 내에서 Ruby 코드를 사용할 수 있습니다.
액션 뷰는 양식, 날짜 및 문자열에 대한 HTML 태그를 동적으로 생성하는 많은 헬퍼 메서드를 제공합니다. 필요에 따라 애플리케이션에 사용자 정의 헬퍼를 추가할 수도 있습니다.
참고: 액션 뷰는 to_param
및 to_partial_path
와 같은 Active Model 기능을 사용할 수 있습니다. 이것이 액션 뷰가 Active Model에 의존한다는 것을 의미하지는 않습니다. 액션 뷰는 어떤 Ruby 라이브러리와도 함께 사용할 수 있는 독립적인 패키지입니다.
Rails에서 액션 뷰 사용하기
액션 뷰 템플릿(이른바 "뷰”)은 app/views
디렉토리의 하위 디렉토리에 저장됩니다. 각 컨트롤러의 이름과 일치하는 하위 디렉토리가 있습니다. 해당 하위 디렉토리 내의 뷰 파일은 컨트롤러 작업에 대한 특정 뷰를 렌더링하는 데 사용됩니다.
예를 들어 스캐폴딩을 사용하여 article
리소스를 생성하면 Rails는 app/views/articles
에 다음과 같은 파일을 생성합니다:
$ bin/rails generate scaffold article [...] invoke scaffold_controller create app/controllers/articles_controller.rb invoke erb create app/views/articles create app/views/articles/index.html.erb create app/views/articles/edit.html.erb create app/views/articles/show.html.erb create app/views/articles/new.html.erb create app/views/articles/_form.html.erb [...]
파일 이름은 Rails 명명 규칙을 따릅니다. 이름은 관련 컨트롤러 작업과 공유됩니다. 예를 들어 index.html.erb
, edit.html.erb
등입니다.
이 명명 규칙을 따르면 Rails는 자동으로 일치하는 뷰를 찾아 컨트롤러 작업 끝에 렌더링하므로 직접 지정할 필요가 없습니다. 예를 들어 articles_controller.rb
의 index
작업은 자동으로 app/views/articles/
디렉토리의 index.html.erb
뷰를 렌더링합니다. 파일 이름과 위치가 모두 중요합니다.
클라이언트에 반환되는 최종 HTML은 .html.erb
ERB 파일, 이를 감싸는 레이아웃 템플릿, 그리고 ERB 파일이 참조할 수 있는 모든 부분 템플릿의 조합으로 구성됩니다. 이 가이드의 나머지 부분에서는 템플릿
, 부분 템플릿
, 레이아웃
의 세 가지 구성 요소에 대해 자세히 설명합니다.
템플릿
액션 뷰 템플릿은 다양한 형식으로 작성할 수 있습니다. 템플릿 파일에 .erb
확장자가 있으면 HTML 응답을 생성하기 위해 내장 Ruby를 사용합니다. 템플릿에 .jbuilder
확장자가 있으면 Jbuilder 젬을 사용하여 JSON 응답을 생성합니다. 그리고 .builder
확장자가 있는 템플릿은 Builder::XmlMarkup
라이브러리를 사용하여 XML 응답을 생성합니다.
Rails는 파일 확장자를 사용하여 여러 템플릿 시스템을 구분합니다. 예를 들어 ERB 템플릿 시스템을 사용하는 HTML 파일에는 .html.erb
확장자가 있고, Jbuilder 템플릿 시스템을 사용하는 JSON 파일에는 .json.jbuilder
확장자가 있습니다. 다른 라이브러리도 다른 템플릿 유형과 파일 확장자를 추가할 수 있습니다.
ERB
ERB 템플릿은 <% %>
및 <%= %>
같은 특수 ERB 태그를 사용하여 정적 HTML 내에 Ruby 코드를 삽입하는 방법입니다.
Rails가 .html.erb
로 끝나는 ERB 뷰 템플릿을 처리할 때 내장 Ruby 코드를 평가하고 ERB 태그를 동적 출력으로 대체합니다. 이 동적 콘텐츠는 정적 HTML 마크업과 결합되어 최종 HTML 응답을 형성합니다.
ERB 템플릿 내에서 Ruby 코드는 <% %>
및 <%= %>
태그를 사용하여 포함할 수 있습니다. 출력을 생성하지 않고 Ruby 코드를 실행하려면 <% %>
태그(=
없음)를 사용합니다. 출력을 렌더링하려면 <%= %>
태그를 사용합니다. 예를 들어 person.name
과 같은 모델 속성:
<h1>Names</h1> <% @people.each do |person| %> Name: <%= person.name %><br> <% end %>
일반 삽입 태그(<% %>
)를 사용하여 루프를 설정하고 출력 삽입 태그(<%= %>
)를 사용하여 이름을 삽입합니다.
print
및 puts
와 같은 함수는 ERB 템플릿에 렌더링되지 않는다는 점에 유의하세요. 따라서 다음과 같은 것은 작동하지 않습니다:
<%# WRONG %> Hi, Mr. <% puts "Frodo" %>
위의 예에서는 <%# %>
태그 내에 주석을 추가할 수 있습니다.
선행 및 후행 공백을 제거하려면 <%-
-%>
를 <%
및 %>
와 교환적으로 사용할 수 있습니다.
Jbuilder
Jbuilder
는 Rails 팀이 관리하고 기본 Rails Gemfile
에 포함된 젬입니다. JSON 응답을 생성하는 템플릿에 사용됩니다.
없다면 Gemfile
에 다음을 추가할 수 있습니다:
gem "jbuilder"
.jbuilder
확장자가 있는 템플릿에는 자동으로 json
이라는 이름의 Jbuilder 객체가 제공됩니다.
다음은 기본 예제입니다:
json.name("Alex") json.email("alex@example.com")
다음과 같은 결과를 생성합니다:
{ "name": "Alex", "email": "alex@example.com" }
Jbuilder 문서에서 더 많은 예제를 확인하세요.
Builder
Builder 템플릿은 ERB보다 프로그래밍 방식의 대안입니다. Jbuilder와 유사하지만 JSON 대신 XML을 생성하는 데 사용됩니다.
.builder
확장자가 있는 템플릿에는 자동으로 xml
이라는 이름의 XmlMarkup
객체가 제공됩니다.
다음은 기본 예제입니다:
xml.em("emphasized") xml.em { xml.b("emph & bold") } xml.a("A Link", "href" => "https://rubyonrails.org") xml.target("name" => "compile", "option" => "fast")
이는 다음과 같은 결과를 생성합니다:
<em>emphasized</em> <em><b>emph & bold</b></em> <a href="https://rubyonrails.org">A link</a> <target option="fast" name="compile" />
블록이 있는 메서드는 블록 내의 중첩된 마크업으로 처리되는 XML 마크업 태그로 취급됩니다. 예를 들어 다음과 같습니다:
xml.div { xml.h1(@person.name) xml.p(@person.bio) }
다음과 같은 결과를 생성합니다:
<div> <h1>David Heinemeier Hansson</h1> <p>A product of Danish Design during the Winter of '79...</p> </div>
Builder 문서에서 더 많은 예제를 확인하세요.
템플릿 컴파일
기본적으로 Rails는 각 템플릿을 렌더링 메서드로 컴파일합니다. 개발 환경에서 템플릿을 변경하면 Rails는 파일의 수정 시간을 확인하고 다시 컴파일합니다.
페이지의 다른 부분을 별도로 캐시하고 만료시켜야 하는 경우 Fragment Caching을 사용할 수 있습니다. 자세한 내용은 캐싱 가이드에서 확인하세요.
부분 템플릿
부분 템플릿 - 일반적으로 “부분 템플릿"이라고 불리는 것 - 은 뷰 템플릿을 더 작은 재사용 가능한 청크로 분할하는 방법입니다. 부분 템플릿을 사용하면 주 템플릿에서 코드 조각을 추출하여 별도의 더 작은 파일로 만들고, 해당 파일을 주 템플릿에서 렌더링할 수 있습니다. 또한 주 템플릿에서 데이터를 부분 템플릿에 전달할 수 있습니다.
몇 가지 예를 통해 이를 살펴보겠습니다:
부분 템플릿 렌더링
뷰의 일부로 부분 템플릿을 렌더링하려면 뷰 내에서 render
메서드를 사용합니다:
<%= render "product" %>
이렇게 하면 동일한 폴더에 있는 _product.html.erb
파일을 찾아 해당 뷰 내에서 렌더링합니다. 부분 템플릿 파일 이름은 관례상 선행 밑줄 문자로 시작합니다. 파일 이름은 일반 뷰와 부분 템플릿을 구분합니다. 그러나 뷰 내에서 부분 템플릿을 참조할 때는 밑줄을 사용하지 않습니다. 다른 디렉토리에서 부분 템플릿을 참조할 때도 마찬가지입니다:
<%= render "application/product" %>
이 코드는 app/views/application/
디렉토리의 _product.html.erb
부분 템플릿 파일을 찾아 표시합니다.
뷰를 단순화하기부분 템플릿을 사용하는 또 다른 방법은 메서드와 동등하게 취급하는 것입니다. 뷰에서 세부 사항을 이동하여 전체적인 흐름을 더 쉽게 파악할 수 있게 하는 것입니다. 예를 들어 다음과 같은 뷰가 있을 수 있습니다:
<%= render "application/ad_banner" %> <h1>Products</h1> <p>Here are a few of our fine products:</p> <% @products.each do |product| %> <%= render partial: "product", locals: { product: product } %> <% end %> <%= render "application/footer" %>
여기서 _ad_banner.html.erb
및 _footer.html.erb
부분 템플릿은 애플리케이션의 많은 페이지에서 공유되는 콘텐츠를 포함할 수 있습니다. 제품 페이지에 집중할 때 이러한 섹션의 세부 정보를 볼 필요가 없습니다.
위의 예에서는 _product.html.erb
부분 템플릿도 사용합니다. 이 부분 템플릿에는 개별 제품을 렌더링하는 세부 정보가 포함되어 있으며 @products
컬렉션의 각 제품을 렌더링하는 데 사용됩니다.
locals
옵션을 사용하여 부분 템플릿에 데이터 전달하기
부분 템플릿을 렌더링할 때 렌더링 뷰에서 부분 템플릿으로 데이터를 전달할 수 있습니다. locals:
옵션 해시를 사용합니다. locals:
옵션의 각 키는 부분 템플릿 로컬 변수로 사용할 수 있습니다:
<%# app/views/products/show.html.erb %> <%= render partial: "product", locals: { my_product: @product } %> <%# app/views/products/_product.html.erb %> <%= tag.div id: dom_id(my_product) do %> <h1><%= my_product.name %></h1> <% end %>
"부분 템플릿 로컬 변수"는 특정 부분 템플릿에 국한되고 해당 부분 템플릿 내에서만 사용할 수 있는 변수입니다. 위의 예에서 my_product
는 부분 템플릿 로컬 변수입니다. 원래 뷰에서 @product
의 값이 전달되었습니다.
일반적으로 이 로컬 변수를 product
라고 하지만, 이 예에서는 인스턴스 변수 이름과 템플릿 이름을 구분하기 위해 my_product
를 사용했습니다.
locals
가 해시이므로 필요에 따라 여러 변수를 전달할 수 있습니다. 예를 들어 locals: { my_product: @product, my_reviews: @reviews }
와 같이 전달할 수 있습니다.
그러나 템플릿에서 locals:
옵션의 일부로 전달되지 않은 변수를 참조하면 ActionView::Template::Error
가 발생합니다:
<%# app/views/products/_product.html.erb %> <%= tag.div id: dom_id(my_product) do %> <h1><%= my_product.name %></h1> <%# => `product_reviews` 때문에 ActionView::Template::Error 발생 %> <% product_reviews.each do |review| %> <%# ... %> <% end %> <% end %>
local_assigns
사용하기
각 부분 템플릿에는 local_assigns라는 메서드가 있습니다. 이 메서드를 사용하여 locals:
옵션을 통해 전달된 키에 액세스할 수 있습니다. 부분 템플릿이 :some_key
와 함께 렌더링되지 않은 경우 local_assigns[:some_key]
의 값은 부분 템플릿 내에서 nil
이 됩니다.
예를 들어 다음과 같이 product
만 locals:
에 설정되어 있으므로 product_reviews
는 nil
입니다:
<%# app/views/products/show.html.erb %> <%= render partial: "product", locals: { product: @product } %> <%# app/views/products/_product.html.erb %> <% local_assigns[:product] # => "#<Product:0x0000000109ec5d10>" %> <% local_assigns[:product_reviews] # => nil %>
local_assigns
의 한 가지 사용 사례는 로컬 변수를 선택적으로 전달하고 로컬 변수가 설정되었는지 여부에 따라 부분 템플릿에서 작업을 조건부로 수행하는 것입니다. 예를 들어:
<% if local_assigns[:redirect] %> <%= form.hidden_field :redirect, value: true %> <% end %>
Active Storage의 _blob.html.erb
에서 다른 예를 볼 수 있습니다. 이 경우 in_gallery
로컬 변수가 설정되었는지 여부에 따라 크기를 설정합니다.
<%= image_tag blob.representation(resize_to_limit: local_assigns[:in_gallery] ? [ 800, 600 ] : [ 1024, 768 ]) %>
render
에서 partial
및 locals
옵션 생략하기
위의 예에서 render
는 partial
및 locals
옵션을 사용합니다. 그러나 이러한 옵션만 필요한 경우 키를 생략하고 값만 지정할 수 있습니다.
예를 들어 다음과 같이 작성할 수 있습니다:
<%= render partial: "product", locals: { product: @product } %>
대신 다음과 같이 작성할 수 있습니다:
<%= render "product", product: @product %>
규칙에 따라 다음과 같이 작성할 수도 있습니다:
<%= render @product %>
이렇게 하면 app/views/products/
디렉토리에 있는 _product.html.erb
부분 템플릿을 찾고 product
로컬 변수에 @product
값을 전달합니다.
as
및 object
옵션
기본적으로 템플릿에 전달된 객체는 템플릿과 동일한 이름의 로컬 변수에 있습니다. 따라서 다음과 같이 작성할 수 있습니다:
<%= render @product %>
_product.html.erb
부분 템플릿 내에서 product
인스턴스 변수를 사용할 수 있습니다. 다음과 같이 작성한 것과 동일합니다:
<%= render partial: "product", locals: { product: @product } %>
object
옵션을 사용하면 다른 이름을 지정할 수 있습니다. 템플릿의 객체가 다른 곳(예: 다른 인스턴스 변수 또는 로컬 변수)에 있는 경우 유용합니다.
예를 들어 다음과 같이 작성할 수 있습니다:
<%= render partial: "product", locals: { product: @item } %>
대신 다음과 같이 작성할 수 있습니다:
<%= render partial: "product", object: @item %>
이렇게 하면 @item
인스턴스 변수가 product
라는 부분 템플릿 로컬 변수에 할당됩니다. 기본 product
대신 다른 이름을 사용하고 싶다면 :as
옵션을 사용할 수 있습니다.
as
옵션을 사용하면 로컬 변수 이름을 다른 이름으로 지정할 수 있습니다:
<%= render partial: "product", object: @item, as: "item" %>
이는 다음과 같습니다:
<%= render partial: "product", locals: { item: @item } %>
컬렉션 렌더링
뷰에서 @products
와 같은 컬렉션을 반복하고 각 객체에 대해 부분 템플릿을 렌더링하는 것은 일반적입니다. 이 패턴은 배열을 허용하고 각 요소에 대해 부분 템플릿을 렌더링하는 단일 메서드로 구현되었습니다.
따라서 모든 제품을 렌더링하는 다음 예제:
<% @products.each do |product| %> <%= render partial: "product", locals: { product: product } %> <% end %>
단일 줄로 다시 작성할 수 있습니다:
<%= render partial: "product", collection: @products %>
컬렉션으로 부분 템플릿이 호출될 때 부분 템플릿의 개별 인스턴스는 부분 템플릿의 이름을 따서 지정된 변수를 통해 렌더링되는 컬렉션 멤버에 액세스할 수 있습니다. 이 경우 부분 템플릿이 _product.html.erb
이므로 product
를 사용하여 렌더링되는 컬렉션 멤버를 참조할 수 있습니다.
또한 다음과 같은 규칙 기반 약식 구문을 사용할 수 있습니다.
<%= render @products %>
위의 예에서 @products
는 Product
인스턴스의 컬렉션이라고 가정합니다. Rails는 명명 규칙을 사용하여 사용할 부분 템플릿의 이름을 결정합니다. 이 경우 Product
입니다. 실제로 다른 모델 인스턴스의 혼합 컬렉션을 렌더링할 때도 이 약식 구문을 사용할 수 있으며, Rails는 각 멤버에 대한 적절한 부분 템플릿을 선택합니다.
공백 템플릿
spacer_template
옵션을 사용하여 주 부분 템플릿 인스턴스 사이에 렌더링할 두 번째 부분 템플릿을 지정할 수도 있습니다:
<%= render partial: @products, spacer_template: "product_ruler" %>
Rails는 _product_ruler.html.erb
부분 템플릿(데이터 없이)을 각 _product.html.erb
부분 템플릿 쌍 사이에 렌더링합니다.
카운터 변수
Rails는 부분 템플릿이 호출될 때 부분 템플릿 이름 뒤에 _counter
가 붙은 카운터 변수를 제공합니다. 예를 들어 @products
컬렉션을 렌더링할 때 _product.html.erb
부분 템플릿에서 product_counter
변수를 사용할 수 있습니다. 이 변수는 부분 템플릿이 포함된 뷰 내에서 렌더링된 횟수를 나타내며, 첫 번째 렌더링에서는 0
부터 시작합니다.
<%# index.html.erb %> <%= render partial: "product", collection: @products %>
<%# _product.html.erb %> <%= product_counter %> # 첫 번째 제품은 0, 두 번째 제품은 1...
로컬 변수 이름이 as:
옵션을 사용하여 변경된 경우에도 작동합니다. 예를 들어 as: :item
을 사용한 경우 카운터 변수는 item_counter
가 됩니다.
참고: 다음 두 섹션인 엄격한 로컬 및 패턴 매칭을 통한 로컬 할당은 부분 템플릿 사용의 더 고급 기능입니다.
패턴 매칭을 통한 local_assigns
local_assigns
가 Hash
이므로 Ruby 3.1의 패턴 매칭 할당 연산자와 호환됩니다:
local_assigns => { product:, **options } product # => "#<Product:0x0000000109ec5d10>" options # => {}
:product
이외의 키가 부분 템플릿 로컬 Hash
변수에 할당되면 헬퍼 메서드 호출에 스플랫팅할 수 있습니다:
<%# app/views/products/_product.html.erb %> 계속해서 부분 템플릿 사용에 대한 내용을 설명하겠습니다. ### 패턴 매칭을 통한 `local_assigns` (계속) ```html+erb <%# app/views/products/_product.html.erb %> <% local_assigns => { product:, **options } %> <%= tag.div id: dom_id(product), **options do %> <h1><%= product.name %></h1> <% end %> <%# app/views/products/show.html.erb %> <%= render "products/product", product: @product, class: "card" %> <%# => <div id="product_1" class="card"> # <h1>A widget</h1> # </div> %>
패턴 매칭 할당은 변수 이름 변경도 지원합니다:
local_assigns => { product: record } product # => "#<Product:0x0000000109ec5d10>" record # => "#<Product:0x0000000109ec5d10>" product == record # => true
locals:
옵션에 키가 없는 경우 기본값을 사용하도록 fetch
를 사용하여 변수를 조건부로 읽을 수도 있습니다:
<%# app/views/products/_product.html.erb %> <% local_assigns.fetch(:related_products, []).each do |related_product| %> <%# ... %> <% end %>
Ruby 3.1의 패턴 매칭 할당과 Hash#with_defaults를 결합하면 부분 템플릿 로컬 기본 변수 할당을 간단하게 할 수 있습니다:
<%# app/views/products/_product.html.erb %> <% local_assigns.with_defaults(related_products: []) => { product:, related_products: } %> <%= tag.div id: dom_id(product) do %> <h1><%= product.name %></h1> <% related_products.each do |related_product| %> <%# ... %> <% end %> <% end %>
정보: 기본적으로 부분 템플릿은 키워드 인수로 모든 locals
를 허용합니다. 부분 템플릿이 허용하는 locals
를 정의하려면 locals:
매직 주석을 사용하세요. 자세한 내용은 엄격한 로컬을 참고하세요.
엄격한 로컬
액션 뷰 부분 템플릿은 키워드 인수로 임의 수의 locals
를 허용합니다. locals:
매직 주석을 사용하여 템플릿이 허용하는 locals
의 수와 종류를 강제하고, 기본값을 설정할 수 있습니다.
다음은 locals:
매직 주석의 예입니다:
<%# app/views/messages/_message.html.erb %> <%#locals: (message: ) -%> <%= message %>
위의 경우 message
는 필수 로컬 변수입니다. :message
로컬 변수 인수 없이 부분 템플릿을 렌더링하면 예외가 발생합니다:
render "messages/message" # => ActionView::Template::Error: missing local: :message for app/views/messages/_message.html.erb
기본값이 설정된 경우 message
가 전달되지 않으면 기본값이 사용됩니다:
<%# app/views/messages/_message.html.erb %> <% -%> <%= message %>
locals:
매직 주석에 지정되지 않은 로컬 변수로 부분 템플릿을 렌더링하면 예외가 발생합니다:
render "messages/message", unknown_local: "will raise" # => ActionView::Template::Error: unknown local: :unknown_local for app/views/messages/_message.html.erb
선택적 로컬 변수 인수를 허용하려면 이중 스플랫 **
연산자를 사용할 수 있습니다:
<%# app/views/messages/_message.html.erb %> <%# locals: (message: "Hello, world!", **attributes) -%> <%= tag.p(message, **attributes) %>
또는 locals:
를 빈 ()
으로 설정하여 locals
를 완전히 비활성화할 수 있습니다:
<%# app/views/messages/_message.html.erb %> <%# locals: () %>
이 경우 모든 로컬 변수 인수로 부분 템플릿을 렌더링하면 예외가 발생합니다:
render "messages/message", unknown_local: "will raise" # => ActionView::Template::Error: no locals accepted for app/views/messages/_message.html.erb
액션 뷰는 #
-접두사 주석을 지원하는 모든 템플릿 엔진에서 locals:
매직 주석을 처리하며, 부분 템플릿의 모든 줄에서 매직 주석을 읽습니다.
주의: 키워드 인수만 지원됩니다. 위치 인수 또는 블록 인수를 정의하면 렌더링 시 액션 뷰 오류가 발생합니다.
레이아웃
레이아웃은 Rails 컨트롤러 작업의 결과를 렌더링하는 공통 뷰 템플릿으로 사용할 수 있습니다. Rails 애플리케이션은 페이지를 렌더링할 수 있는 여러 레이아웃을 가질 수 있습니다.
예를 들어, 애플리케이션은 로그인한 사용자용 레이아웃과 마케팅 부분용 레이아웃을 가질 수 있습니다. 로그인한 사용자 레이아웃에는 많은 컨트롤러 작업에 걸쳐 존재해야 하는 상위 수준 탐색이 포함될 수 있습니다. SaaS 앱의 판매 레이아웃에는 "가격” 및 “문의"와 같은 페이지에 대한 상위 수준 탐색이 포함될 수 있습니다. 다른 레이아웃에는 다른 헤더 및 푸터 콘텐츠가 있을 수 있습니다.
현재 컨트롤러 작업에 대한 레이아웃을 찾으려면 Rails는 먼저 app/views/layouts
디렉토리에서 컨트롤러와 동일한 기본 이름의 파일을 찾습니다. 예를 들어 ProductsController
클래스의 작업을 렌더링하면 app/views/layouts/products.html.erb
를 사용합니다.
컨트롤러 특정 레이아웃이 없는 경우 Rails는 app/views/layouts/application.html.erb
를 사용합니다.
다음은 application.html.erb
파일의 간단한 레이아웃 예입니다:
<!DOCTYPE html> <html> <head> <title><%= "Your Rails App" %></title> <%= csrf_meta_tags %> <%= csp_meta_tag %> <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %> <%= javascript_importmap_tags %> </head> <body> <nav> <ul> <li><%= link_to "Home", root_path %></li> <li><%= link_to "Products", products_path %></li> <!-- Additional navigation links here --> </ul> </nav> <%= yield %> <footer> <p>© <%= Date.current.year %> Your Company</p> </footer> </body> </html>
위의 레이아웃 예에서 뷰 콘텐츠는 <%= yield %>
부분에 렌더링되며, 동일한 <head>
, <nav>
및 <footer>
콘텐츠로 둘러싸입니다.
Rails는 개별 컨트롤러와 작업에 특정 레이아웃을 할당하는 더 많은 방법을 제공합니다. 일반적인 레이아웃에 대해서는 Rails의 레이아웃 및 렌더링 가이드에서 자세히 알아볼 수 있습니다.
부분 레이아웃
부분 템플릿에도 자체 레이아웃을 적용할 수 있습니다. 이러한 레이아웃은 컨트롤러 작업에 적용되는 레이아웃과 다르지만 유사한 방식으로 작동합니다.
페이지에 기사를 표시하고 표시 목적으로 div
로 래핑하려고 한다고 가정해 보겠습니다. 먼저 새 Article
을 만듭니다:
Article.create(body: 'Partial Layouts are cool!')
show
템플릿에서 box
레이아웃으로 _article
부분 템플릿을 렌더링합니다:
<%# app/views/articles/show.html.erb %> <%= render partial: 'article', layout: 'box', locals: { article: @article } %>
box
레이아웃은 _article
부분 템플릿을 div
로 래핑합니다:
<%# app/views/articles/_box.html.erb %> <div class="box"> <%= yield %> </div>
부분 레이아웃은 render
호출에 전달된 article
로컬 변수에 액세스할 수 있지만, 이 경우 _box.html.erb
에서 사용되지 않습니다.
애플리케이션 전체 레이아웃과 달리 부분 레이아웃에는 여전히 밑줄 접두사가 있습니다.
yield
를 호출하는 대신 부분 레이아웃에 코드 블록을 렌더링할 수도 있습니다. 예를 들어 _article
부분 템플릿이 없는 경우 다음과 같이 할 수 있습니다:
<%# app/views/articles/show.html.erb %> <%= render(layout: 'box', locals: { article: @article }) do %> <div> <p><%= article.body %></p> </div> <% end %>
이전 예와 동일한 출력을 생성합니다.
부분 레이아웃이 있는 컬렉션
컬렉션을 렌더링할 때 :layout
옵션을 사용할 수 있습니다:
<%= render partial: "article", collection: @articles, layout: "special_layout" %>
레이아웃은 컬렉션의 각 항목과 함께 부분 템플릿과 함께 렌더링됩니다. 현재 객체 및 객체카운터 변수, 위의 예에서 article
및 `articlecounter`는 레이아웃에서도 사용할 수 있습니다.
헬퍼
Rails는 액션 뷰와 함께 사용할 수 있는 많은 헬퍼 메서드를 제공합니다. 이에는 다음이 포함됩니다:
- 날짜, 문자열 및 숫자 형식 지정
- 이미지, 비디오, 스타일시트 등에 대한 HTML 링크 생성
- 콘텐츠 sanitize
- 양식 생성
- 콘텐츠 지역화
액션 뷰 헬퍼 가이드 및 액션 뷰 폼 헬퍼 가이드에서 헬퍼에 대해 자세히 알아볼 수 있습니다.
지역화된 뷰
액션 뷰에는 현재 로케일에 따라 다른 템플릿을 렌더링할 수 있는 기능이 있습니다.
예를 들어 ArticlesController
에 show
작업이 있다고 가정해 보겠습니다. 기본적으로 이 작업을 호출하면 app/views/articles/show.html.erb
를 렌더링합니다. 그러나 I18n.locale = :de
를 설정하면 Action View는 먼저 app/views/articles/show.de.html.erb
템플릿을 찾아 렌더링합니다. 지역화된 템플릿이 없는 경우 장식되지 않은 버전이 사용됩니다. 즉, 모든 경우에 대해 지역화된 뷰를 제공할 필요는 없지만 사용 가능한 경우 선호되고 사용됩니다.
동일한 기술을 사용하여 공용 디렉토리의 구조 파일을 지역화할 수 있습니다. 예를 들어 I18n.locale = :de
를 설정하고 `public/네, 지역화된 뷰에 대한 내용을 계속 설명하겠습니다.
지역화된 뷰 (계속)
동일한 기술을 사용하여 공용 디렉토리의 구조 파일을 지역화할 수 있습니다. 예를 들어 I18n.locale = :de
를 설정하고 public/500.de.html
및 public/404.de.html
을 만들면 지역화된 구조 페이지를 사용할 수 있습니다.
Rails 국제화(I18n) API에 대해 자세히 알아보려면 여기를 참고하세요.
요약
이 가이드에서는 액션 뷰의 다양한 기능에 대해 살펴보았습니다:
- 액션 뷰는 MVC의 V(View)이며, 컨트롤러 작업의 결과를 렌더링합니다.
- 템플릿은 ERB, Jbuilder, Builder 등 다양한 형식으로 작성할 수 있습니다.
- 부분 템플릿을 사용하면 뷰를 더 작은 재사용 가능한 청크로 분할할 수 있습니다.
- 레이아웃을 사용하면 공통 뷰 템플릿을 렌더링할 수 있습니다.
- 헬퍼 메서드를 사용하면 동적 HTML 생성, 양식 처리 등을 쉽게 수행할 수 있습니다.
- 지역화된 뷰를 사용하면 현재 로케일에 따라 다른 템플릿을 렌더링할 수 있습니다.
이 가이드에서 다룬 개념을 잘 이해하면 Rails 애플리케이션의 뷰 계층을 효과적으로 구축할 수 있습니다.