중첩 레이아웃을 이용한 레이아웃의 구조화

레일스 프레임워크는 애플리케이션 레이아웃를 효율적으로 지원한다.
레일스 프레임워크의 디폴트 레이아웃 파일은 app/views/layouts/application.html.erb이다.

레일스 프로젝트를 생성한 직후 디폴트 레이아웃은 아래와 같다.

<!DOCTYPE html>
<html>
<head>
   <title>Blog</title>
   <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
   <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
   <%= csrf_meta_tags %>
</head>
<body>

<%= yield %>

</body>
</html>

yield 와 content_for

11번 코드라인을 눈여겨 볼 필요가 있다. 레이아웃 파일에서 파라미터 없이 yield를 호출하면 액션 렌더링 결과 전체를 가져 오고, 파라미터와 함께 yield를 호출할 때는 액션 렌더링 결과 중에서 해당 파라미터에 해당하는 content_for 결과를 가져오게 된다. 한편, yield를 모델 클래스 파일에서 사용할 경우에는 순수한 루비 yield 처럼 사용하면 된다. 예를 들어 posts#show(posts 컨트롤러의 show 액션)를 호출할 경우, show 액션 뷰 템플릿을 렌더링한 결과가 placeholder 역할을 하는 yield 위치로 삽입되는 것이다. 이번에는 페이지 타이틀을 글 제목으로 보이도록 하기 위해서 Blog 태그를 아래와 같이 변경해 볼 수 있다.

<title><%= content_for?(:title) ? yield(:title) : "Blog" %></title>

이로써 임의의 액션 렌더링 결과 중에서 :title로 명시된 content_for 내용을 페이지 타이틀로 표시해 주게 된다. 여기서 content_for?(:title)를 사용하여 :title에 해당하는 content_for 블록이 있는지를 확인할 수 있다.

아래의 예, show.html.erb 뷰 템플릿 파일을 내용을 보자.

<% content_for :title %>
  <% "Nicerails : " +  @post.title %>
<% end %>
<h1><%= @post.title %></h1>
<%= @post.content %>

즉, show 액션이 호출될 때에만 (“Nicerails : ” + @post.title) 값을 :title 섹션에 할당해 준다. 여기서의 @postshow 액션 중에서 @post = Post.find(params[:id]) 결과로 얻어진다.

파라메터 yield

만약 모든 posts 컨트롤러 액션의 렌더링 결과에 :title 컨텐츠를 yield 하기 위해서는 posts 컨트롤러 전용 레이아웃 파일(app/views/posts.html.erb)을 생성하고 아래와 같이 작성한다.

<% content_for :title do %>
  "Nicerails Posts"
<% end %>

<%= yield %>

<%= render template: "layouts/application" %>

주의 : 특정 컨트롤러 전용 레이아웃을 작성할 때는 반드시 파일 끝에 <%= render template: "layouts/application" %>을 추가해 주어야 전체 애플리케이션 레이아웃이 적용된다는 것을 기억해야 한다.

글쓴이: 최효성

외과전문의,웹프로그래밍,컴퓨터 일러스트레이션 / Surgeon, Medical Illustration, Web Programmer

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중