코드이그나이터4 컨트롤러 다루기 - 4 - 뷰 보여주기

이번 챕터의 예제는 https://github.com/koeunyeon/ci4/tree/show_view 에서 확인할 수 있습니다.

우리는 이제까지 문자열을 그대로 브라우저에 보여줬습니다. 마치 C언어로 CGI를 만들던 시절처럼 말이죠. 간단한 문자열을 만들기에는 이런 방법도 나쁘지 않지만, 복잡한 HTML을 다루기에는 너무 힘들 겁니다.
그래서 MVC 중 View를 분리하겠습니다. 뷰는 a) 어떤 데이터를 받아서 b) 화면에 어떻게 그려질 지만을 알고 있는 코드 조각입니다. 데이터가 어디서 오는지, 어떤 가공 과정을 거치는지 뷰는 모릅니다.

먼저 뷰를 분리하는 방법부터 확인해 보겠습니다.
Sample 컨트롤러에 아래의 메소드를 추가합니다.
/app/Controllers/Sample.php

public function showview(): string
{
    return view("/showView"); // (1)
}

컨트롤러 코드를 확인해 보겠습니다.
(1) showView라는 이름의 뷰 파일을 호출합니다.
코드이그나이터4의 컨트롤러에는 view라는 메소드가 상위 클래스 BaseController에 정의되어 있습니다. 이름에서 알 수 있듯이 view함수는 뷰 파일을 호출하는 역할을 합니다.

뷰 파일도 추가하겠습니다. 뷰 파일은 app/Views 폴더 아래에 위치합니다.
PHPStorm에서 app/Views/ 폴더를 우클릭하고 New -> PHP File을 선택합니다. 이후 파일 이름을 showView로 입력하면 /app/Views/showView.php 파일이 생성됩니다.

파일의 내용을 아래의 대용으로 대체합니다.
/app/Views/showView.php

Hello. this is View File!

http://localhost:8080/sample/showview URL에 접속해서 잘 나오는 지 확인해 보겠습니다.

뷰에 데이터 전달하기

뷰가 늘 정적인 화면만 보여준다면 그다지 쓸모있지는 않을 겁니다. 똑같은 HTML만 보이니까요. 이번에는 컨트롤러에서 만들어낸 데이터를 뷰에 전달해서 동적으로 HTML을 만들어내는 방법을 확인해 보겠습니다.

우선 뷰에 데이터를 전달할 메소드를 Sample 컨트롤러에 추가하겠습니다.
/app/Controllers/Sample.php

public function viewdata(): string
{
    $data = ['name' => 'ci4', 'age' => 20]; // (1)
    return view("/viewData.php", $data); // (2)
}

(1) 뷰에 전달할 데이터를 만들어서 $data 변수에 담습니다.

$data = ['name' => 'ci4', 'age' => 20];

PHP 5.4버전부터는 array()를 써서 배열을 만드는 대신 []를 이용한 축약형 표현을 쓸 수 있습니다.

// PHP 5.4 이전의 배열 선언
$data = array(
    "name" => "ci4",
    "age" => 20
);

// PHP 5.4 이상 배열 선언
$data = [
    "name" => "ci4",
    "age" => 20
]

코드이그나이터4는 PHP 7.2 이상에서 동작하기 때문에 아래 표현처럼 사용 가능합니다.

(2) view 함수의 두번째 파라미터로 뷰에서 사용할 데이터를 전달할 수 있습니다.
소스코드

view("/viewData.php", $data);

이제 컨트롤러에서 전달받은 데이터를 뷰에서 사용하는 방법을 알아보겠습니다.
app/Views 폴더 아래에 viewData.php 뷰 파일을 생성합니다.
app/Views/viewData.php

<p>name : <?= $name ?></p> <!-- (1) -->
<p>age : <?= $age ?></p> <!-- (2) -->

(1) HTML에서 <P> 태그는 paragraph의 약자로 "문단"을 나타내는 태그입니다. 예제 코드에서는 HTML에서 줄바꿈을 위해 사용했습니다.

<p>name : <?= $name ?></p>

(2) 컨트롤러에서 전달받은 연관배열의 키를 변수처럼 사용합니다. age를 예로 들면 컨트롤러에서는 "age" => 20이라고 선언되어 뷰에 전달되었으나 뷰에서는 $age 형태로 사용합니다.

<p>age : <?= $age ?></p>

결과가 잘 나오는지 확인해 보겠습니다.
http://localhost:8080/sample/viewdata URL에 접속해서 값이 나오는지 확인해 봅시다.