업무 기록/WEB

Node js, Express js - res.render 렌더링

code2772 2023. 8. 1. 12:32
728x90
반응형

res.render() 메서드는 Express 애플리케이션에서 뷰 템플릿을 렌더링하여 클라이언트에게 HTML 페이지를 제공하는 역할을 한다. 이 메서드를 사용하여 뷰 템플릿과 클라이언트 사이의 상호작용을 가능하게 한다.

 

✔ 예제 코드

res.render('mypage', {session: req.session, email_id: email[0], email_com: email[1], userInfo: result.data, accountList: accountList, csrfToken: req.csrfToken()});

res.render() 메서드:
res.render(view, [locals], callback) 형태로 사용된다.
view: 
렌더링할 뷰 템플릿의 이름을 지정한다. 이 이름은 뷰 템플릿 파일의 경로에서 확장자를 제외한 이름을 의미한다. 예를 들어, 'mypage.ejs' 라는 파일은 view에 'mypage'를 입력한다.
locals (선택적):
뷰 템플릿에 전달할 데이터를 객체 형태로 지정한다. 이 데이터를 통해 뷰 템플릿에서 동적인 내용을 생성할 수 있다.
callback (선택적): 뷰 템플릿 렌더링이 완료된 후 실행되는 콜백 함수를 지정할 수 있다.

locals 객체와 뷰 템플릿에서 사용:
locals 객체에 담겨진 데이터는 뷰 템플릿에서 특정 변수 이름을 통해 접근할 수 있다. 이를 통해 뷰 템플릿에서 데이터를 동적으로 사용할 수 있다.
위 코드에서는 다양한 데이터를 locals 객체에 담아 'mypage' 뷰 템플릿에 전달하고 있다. locals 객체에 포함된 각 데이터는 뷰 템플릿에서 해당 변수 이름을 사용하여 접근할 수 있다.

 

✔ userInfo 객체의 name 값을 출력하는 방법

<!-- mypage.ejs -->
<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
</head>
<body>
    <h1>Hello, <%= userInfo.name %>!</h1>
    <!-- userInfo 객체의 name 속성 값을 출력 -->
</body>
</html>

 EJS 뷰 템플릿에서 <%= ... %> 템플릿 태그를 사용하여 userInfo.name을 출력하고 있다. userInfo 객체는 locals 객체에서 넘어온 데이터로, 해당 객체의 name 속성 값을 템플릿에 동적으로 삽입하여 사용할 수 있다.

반응형