[Flask] Jinja2 사용법

2023. 1. 20. 18:08

Jinja2 템플릿

웹페이지에 필요한 부분을 변경할 때 사용하는 문법

웹페이지에서 파이썬 프로그래밍 가능

jinja2_test.py

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/hello/<id>')
def info(id):
    return render_template('jinja2.html', name=id)

if __name__ == '__main__':
    app.run(host='127.0.0.1', port='8080')

라우팅 경로로 받은 id 변수값을 인자로 받아서 jinja2.html을 리턴한다.

이 때, name이라는 변수 값에 넣어 jinja2.html에 적용시킨다는 의미이다.

jinja2.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>Hello {{ name }}</h1>
  </body>
</html>

jinja2.html 파일 내에서 jinja2의 문법이 사용된다.

위 jinja2_test.py에서 name 변수에 값을 넣어 적용시킨다고 했다.

이 변수값을 사용하려면

{ { 변수명 } }

위와 같은 문법으로 작성하면 된다.

결과

localhost:8080/hello 다음으로 Sso라는 값을 넘겼고 이를 받아 Hello Sso를 출력함을 볼 수 있다.

페이지 소스 코드를 확인해보면 {{name}}이 아닌 Sso가 들어갔다.

여러가지 변수를 사용하고 싶으면

name = id와 같이 name1 = pwd, name2 = age와 같이 (원하는 변수명 = 값) 넘겨주고

{{name}}, {{name2}}, {{name2}}로 하면된다.

반복문

jinja2에서 반복문도 사용할 수 있다.

문법

{ % for i in items %}

{ { i } }

{ % endfor % }

사용해보자.

jinja2_test.py

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/for')
def info():
    num_li = [1, 2, 3]
    return render_template('jinja2.html', nums=num_li)

if __name__ == '__main__':
    app.run(host='127.0.0.1', port='8080')

jinja2.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul>
      {% for i in nums %}
      <li>{{i}}</li>
      {% endfor %}
    </ul>
  </body>
</html>

결과

언뜻 보면 jinja2에서 사용하는 문법과 python의 문법이 비슷하다고 느껴진다.

하지만 차이점이 있다.

반복문의 문법을 더 살펴보자.

li = [1, 2, 3]

for i in range(len(li)):
    print(i)

위와 같은 파이썬 코드를 jinja2에서 써보자.

{ % for i in range(li | length) % }
{ { li[i] } } { { loop.index } }
{ % endfor % }

한 줄씩 보자.

range(len(li)) → range(li | length)
- li의 길이만큼 반복
li[i]
- li의 인덱스(i)번 째 가져오기
- 0부터 시작
loop.index
- 반복문 횟수 가져오기
- 1부터 시작

코드로 보자.

jinja2_test.py는 for문을 사용했던 파일과 같다.

jinja2.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul>
      {% for i in range(nums | length) %}
      <li>{{loop.index}} 번 num : {{nums[i]}}</li>
      {% endfor %}
    </ul>
  </body>
</html>

조건문

문법

{ % if % }

{ % elif % }

{ % else % }

{ % endif % }

jinja2_test.py

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/if')
def info():
    name = 'Sso'
    return render_template('jinja2.html', name=name)

if __name__ == '__main__':
    app.run(host='127.0.0.1', port='8080')

jinja2.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    {% if name == 'Sso' %}
    <h3> {{name}}가 맞습니다. </h3>
    {% else %}
    <h3> {{name}}는 아닙니다.</h3>
    {% endif %}
  </body>
</html>

jinja2_test.py (좌) name = 'Sso' (우) name = 'so'

이 때 들여쓰기는 하지 않아도 된다.

주석

문법

{ # 주석처리 할 내용 # }

'WebFramework > [Flask]' 카테고리의 다른 글

[Flask] sqlalchemy create_engine 오류 (0)	2023.03.30
[Flask] Bootstrap 사용하기 (로그인) (0)	2023.01.20
[Flask] 간단한 로그인 구현 (HTML, GET) (0)	2023.01.20
[Flask] GET 사용법 (0)	2023.01.20
[Flask] httpi 설치 (0)	2023.01.20

Sso