# Ruby on Rails 기본 - 뷰

보통 뷰는 ERB(Embedded Ruby)를 사용해서 출력한다. ERB는 Ruby 스크립트를 삽입한 구조이다.

템플릿 변수를 이용하면 컨트롤러에서 뷰로 데이터를 전달할 수 있다.

```
class HelloController < ApplicationController
  def view
    @msg = 'Hello World~!'   # @msg가 템플릿변수
  end
end
```

물론 CoC를 기억하자. 뷰로 쓰일 템플릿 파일 이름을 신경써줘야한다. 템플릿 파일은 `/app/views` 폴더 내부에 `/<컨트롤러 이름>/<액션 이름>.html.erb` 라는 이름으로 생성해야한다.

```
<div id="main">
<%= @msg %>
</div>
```

위처럼 입력하면 @msg 템플릿 변수로 전달받은 값을 출력한다.

**ERB의 규칙 메모**

* `<% [임의의 코드] %>`: 블록 내부의 코드를 실행. 따라서 주로 연산 또는 제어 구문을 입력할 때 사용한다.
* `<% [무언가 값을 리턴하는 식] %>`: 블록 내부의 값을 출력하는 것. 템플릿 파일의 목적은 화면에 무언가를 출력하는 것이므로 조건 분기 또는 반복문 등의 제어문을 제외하면 대부분 이걸 사용한다.
* `<% ... - %>`이나 `<%= ... -%>`처럼 스크립트 블록 뒤에 - 기호를 붙이면 블록 뒤의 공백과 개행을 제거할 수 있다.

참고로 액션 메서드를 생략할 수 있는데, 이 경우 바로 템플릿 파일을 찾아 실행한다.

한편 라우트로 접근한 결과를 웹 브라우저의 소스 보기로 확인해보면 템플릿 파일에서 정의한 것보다 많은 내용이 출력되는 것을 확인할 수 있다. 자동으로 추가된 내용은 `/app.views/layouts/application.html.erb`에 정의되어 있는 것이다. 이처럼 rails 에서는 기본적으로 `application.html.erb`의 `<%= yield %>`에 개별적인 템플릿을 넣어 최종 출력을 생성한다. 헤더나 푸터, 메뉴 같은 사이트 공통 디자인을 한꺼번에 적용할 수 있다. 외곽 요소를 사용할 때는 레이아웃을 사용하자.

**ERB에서의 주석**

* `<%# ... %>`: 블록 내부의 모든 것을 주석으로 간주
* `#`: `<% ... %>`구문 안에서 사용할 수 있고, `#`위치부터 해당 줄의 마지막까지를 주석으로 간주한다.
* `<% if false %>` ... `<% end %>`: 절대 실행안되는 조건 분기안에 넣어버리는 방식으로 여러줄을 주석처리할 수 있다. 다만 조건 분기와 한눈에 분기하기가 어렵다.
* `<% =begin %>` ... `<% =end %>`: 문서화할 내용을 정의하는 구문. 아래처럼 `=begin`과 `=end`가 반드시 행 제일 앞에 붙어있어야한다.

  ```
  <%
  =begin
  %>
  <% something to dismiss %>
  <%
  =end
  %>
  ```
* `<!--... -->`: 기본적으로 ERB 자체가 HTML을 기반으로 만들어진 템플릿 엔진이므로 HTML 주석을 이용할 수 있다.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://injun-woo30000.gitbook.io/growth-log/i-learned/ruby-on-rails/perfect-ruby-on-rails/ruby-on-rails-1.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.