안녕하세요, 저는 Juro입니다. 저는 django-Components의 관리자 중 한 명입니다. v0.90-0.94 릴리스에서는 JSX/Vue와 유사하게 템플릿의 구성 요소를 훨씬 더 유연하게 사용할 수 있는 기능을 추가했습니다.

(이 정보는 JS/CSS 변수, TypeScript 및 Sass 및 HTML 조각에 대한 지원을 추가하느라 바빠서 이미 약간 오래된 정보입니다(한 달 전에 출시되었습니다. 최신 버전은 v0.101입니다). 흥미로운 내용입니다! 하지만 저는 아직 이 업데이트를 공유하지 않았다는 걸 깨달았습니다!)

어쨌든 다음은 blog_post_props에서 적용된 제목, ID 및 추가 kwargs를 허용하는 blog_post 구성 요소입니다.

    {% blog_post
      title="{{ person.first_name }} {{ person.last_name }}"
      id="{% random_int 10 20 %}"
      ...blog_post_props
    / %}

위는 여러 기능의 조합입니다.

1. 스스로 닫는 태그:

대신

    {% component "my_component" %}
    {% endcomponent %}

이제 간단히 쓸 수 있습니다

    {% component "my_component" / %}

2. 여러 줄 태그:

django_comComponents는 이제 여러 줄 태그를 허용하도록 Django를 자동으로 구성합니다. 따라서 모든 것을 한 줄에 집어넣는 대신:

    {% component "blog_post" title="abcdef..." author="John Wick" date_published="2024-08-28" %}
    {% endcomponent %}

여러 줄에 걸쳐 표시할 수 있습니다.

    {% component "blog_post"
      title="abcdef..."
      author="John Wick"
      date_published="2024-08-28"
    / %}

3. 스프레드 연산자:

JSX의 ...props 연산자 또는 Vue의 v-bind와 유사하게 이는 props/kwargs를 주어진 위치에 삽입합니다.

그래서
대신

    {% component "blog_post"
      title="abcdef..."
      author="John Wick"
      date_published="2024-08-28"
    / %}

kwargs를 사전에 갖고 다음을 적용할 수 있습니다.

    # Python
    props = {
        "title": "abcdef...",
        "author": "John Wick",
        "date_published": "2024-08-28"
    }

    {# Django #}
    {% component "blog_post" ...props %}

4. 구성 요소 입력의 문자열 리터럴 내부 템플릿 태그:

이제 구성 요소 입력 내에서 템플릿 태그와 필터를 사용할 수 있습니다.

    {% component 'blog_post'
      "As positional arg {# yay #}"
      title="{{ person.first_name }} {{ person.last_name }}"
      id="{% random_int 10 20 %}"
      readonly="{{ editable|not }}"
    / %}

이렇게 하면 값의 형식을 지정해야 할 때마다 추가 변수를 정의할 필요가 없습니다.

태그가 하나만 있고 그 주위에 추가 텍스트가 없으면 결과가 값으로 전달됩니다. 따라서 "{% random_int 10 20 %}"는 숫자를 전달하고 "{{ editable|not }}"는 부울을 전달합니다.

한 단계 더 나아가 Vue 또는 React와 비슷한 경험을 할 수도 있습니다. 여기서는 다음과 유사한 임의의 코드 표현식을 평가할 수 있습니다.

이는 템플릿 내에서 Python 표현식을 평가하는 데 사용할 수 있는 expr 태그와 필터를 추가하는 django-expr을 사용하여 가능합니다.

    {% component "my_form"
      value="{% expr 'input_value if is_enabled else None' %}"
    / %}

5. {% comp_name %} {% endcomp_name %} 및 TagFormatter

기본적으로 구성 요소는 구성 요소 태그와 구성 요소 이름을 사용하여 작성됩니다.

    {% component "button" href="..." disabled %}
        Click me!
    {% endcomponent %}

이제 이를 변경할 수 있습니다(직접 만들 수도 있습니다!).

예를 들어 COMPONENTS.tag_formatter를 "django_comComponents.shorthand_comComponent_formatter"로 설정하면 다음과 같은 구성 요소를 작성할 수 있습니다.

    {% button href="..." disabled %}
        Click me!
    {% endbutton %}

더 많은 기능이 추가될 예정이므로 꼭 django-comforts를 사용해 보세요!