XE CORE , loop 문 설명

기본 레이아웃의 GNB 메뉴 구하기 반복문

xe.1.4.5.7/layouts/xe_official/layout.html
<div class="gnb">
  <ul>①
┌  <li loop="$main_menu->list=>$key1,$val1" class="active"|cond="$val1['selected']">②
│ⓐ     <a href="{$val1['href']}" target="_blank"|cond="$val1['open_window']=='Y'">{$val1['link']}</a>③
│        <ul cond="$val1['list']">④
│   ┌     <li loop="$val1['list']=>$key2,$val2" class="active"|cond="$val2['selected']">
│   │ⓑ      <a href="{$val2['href']}" target="_blank"|cond="$val2['open_window']=='Y'">{$val2['link']}</a>
│   └     </li>
│        </ul>
└  </li>
  </ul>
</div>

① <ul>은 반복문에 의해 생성되는 리스트(li) 항목을 가둬두는 싸개(wrapper) 역할을 한다.

② <li> 사용자가 생성한 메뉴트리는 $main_menu에 배열 형태로 담겨있다. 따라서 각 메뉴에 접근하려면 $main_menu->list 형식으로 요소에 접근하고, 현재 접근한 배열 원소의 값은 $key값을 포함하여 $key1 변수와 $val1 변수에 각각 임시 저장한다. 일단 ④번 <ul>이 없다고 생각해 보자. 배열 원소의 갯수만큼 <li>를 반복하는데 cond 조건이 하나 걸려있다. 이때 cond 는 파이프(pipe)를 이용해 클래스(class)와 연결되어 있다. <li>는 무조건 출력하지만 만약 현재 배열의 요소가 선택(selected) 되었다면 클래스를 추가한다는 뜻이다. 여기서의 선택이란, 메뉴트리에서 설정한 메뉴 항목의 이름과 연결 URL 즉 설정했던 모듈의 아이디(mid)가 같다는 뜻이다.

③ <li>가 반복되면서 $val1 임시 변수에 담겨진 해당 값(value)을 출력한다. 메뉴 항목의 이름이다. 배열의 요소에 접근하여 출력하기 위해 {$val1['link']}처럼 작성한다. 메뉴 항목의 이름을 클릭하면 설정된 모듈의 아이디(mid)로 이동하기 위해 {$val1['href']} 문으로 URL 링크를 만든다. 이때 cond 조건은 메뉴트리 설정에서 "새창열기"가 설정되어 있다면 새창을 열어서 보여줘야 한다는 의미이다. target 속성에만 제한된다. 따라서 메뉴항목의 이름은 무조건 출력된다. 2번에서 선택된 메뉴 항목의 이름이라면 CSS의 도움을 받아 선택 되었음을 알리는 스타일이 추가될 것이다.

④ 4번에서 <ul>의 cond 속성은 파이프형이 아니다. 따라서 조건에 따라 <ul>의 생사(?)가 결정된다. 조건의 내용은 이렇다. 2번 <li>를 반복할 때 $val1의 배열 요소 list에도 접근해 보자. 만약 list가 있다면, 이것은 "서브메뉴가 있다면?" 이란 뜻이다. 서브메뉴가 있다면 출력하고 없으면 <ul>과 함께 사라진다. 아주 무서운 조건이다. $val1['list'] 역시 배열 요소를 담고 있을 것이다. 이때 배열의 각 요소는 부모 요소와 구분하기 위해 각각 $key2과 $val2에 임시로 저장하는 것이다. ⓑ의 반복 내용은 ⓐ와 동일하다.

※ 이렇게 생성된 메뉴는 메뉴 항목(서브메뉴), 메뉴 항목(서브메뉴)... 식으로 반복 된다. 서브메뉴가 없는 메뉴는 항목만 출력될 것이다. 출력된 메뉴는 CSS 와 JS 스크립트(jQuery)의 도움을 받아 멋진 메뉴 UI로 변신하게 된다.