Astro로 작성: 구문✍️

개요

안녕하세요 여러분?
이 기사에서는 Astro 구문에 대해 설명하고 HTML에 익숙하다면 배우기가 얼마나 쉬운지 설명합니다.
시작하자! ?

---

Astro에는 JSX와 같은 표현이 있습니까? ?

질문에 대한 대답은 그렇습니다입니다.
Astro 구문은 HTML의 "상위 집합"입니다. 구문은 HTML 또는 JSX 작성 경험이 있는 모든 사람에게 친숙하게 느껴지도록 설계되었으며 구성 요소 및 JavaScript 표현식을 포함할 수 있는 지원을 추가했습니다.
React 개발자라면 프로젝트를 개발할 때 구문에서 많은 유사점을 발견하게 될 것입니다.

변수

Astro 구성 요소의 두 코드 펜스 사이에 있는 머리말 구성 요소 스크립트 내에서 로컬 JavaScript 변수를 정의할 수 있습니다. 그런 다음 이러한 변수를 구성 요소의 HTML 템플릿에 삽입할 수 있습니다.
이런 연습을 전에 어디서 본 적이 있나요? 그렇죠, JSX! ?

---
const name = "Hugo";
---

<div>
  <h1 id="Hello-I-m-name">Hello, I'm {name}!</h1>
</div>

동적 속성

로컬 변수는 중괄호 안에 사용되어 프로젝트에서 생성되고 호출되는 구성 요소에 값을 전달할 수 있습니다.
위의 예는 "name"을 props로 사용하는 일반 구성 요소라고 생각합니다.

---
const name = "Hugo";
---

<hellocomponent name="{name}"></hellocomponent>

HTML 속성이 문자열로 변환되므로 함수와 객체를 HTML 요소에 전달할 수 없습니다.
예:

---
function handleClick () {
    console.log("button clicked!");
}
---
<!-- ❌ This doesn't work! ❌ -->
<button onclick="{handleClick}">Click me!</button>

클라이언트측 스크립트를 사용하여 이벤트 핸들러를 추가하려면 다음과 같이 바닐라 JavaScript를 사용해야 합니다.

<button>

<h2>
  
  
  Dynamic HTML
</h2>

<p>It is possible generate dynamic HTML with JavaScript function like JSX, in this way for example:<br>
</p>
<pre class="brush:php;toolbar:false">---
const languages = ["Python", "JavaScript", "C#"];
---

{languages.map((lang) => (
• {lang}
))}

Astro는 다음과 같은 방식으로 JSX 논리 연산자와 삼항 표현식을 사용하여 조건부로 HTML을 표시할 수 있습니다.

---
const visible = true;
---
{visible && <p>Show me!</p>}

{visible ? <p>Show me!</p> : <p>Else show me!</p>}

동적 태그

이것은 훌륭한 기능입니다. Astro는 HTML 태그 또는 구성 요소를 변수에 할당할 수 있는 가능성을 제공합니다.

---
import HelloComponent from "./HelloComponent.astro";

const Title = 'h1'
const Component = HelloComponent;
---
<title>Hello!</title>
<component></component>

그러나 동적 태그를 사용할 때는 다음 세 가지 사항을 고려해야 합니다.

• 변수 이름은 대문자로 표기해야 합니다. 예를 들어 제목이 아닌 제목을 사용하세요. Astro는 변수 이름을 리터럴 HTML 태그로 렌더링하려고 시도합니다.

• 수화 지침은 지원되지 않습니다. client:* hydration 지시어를 사용할 때 Astro는 생산을 위해 어떤 구성 요소를 번들로 묶어야 하는지 알아야 하며 동적 태그 패턴으로 인해 이것이 작동하지 않습니다.

• define:vars 지시어는 지원되지 않습니다. 하위 요소를 추가 요소로 래핑할 수 없는 경우 요소(위 예의 제목)에 수동으로 추가할 수 있습니다.

조각

Astro는 > 내부 요소를 래핑하는 JSX 구문과 같은 표기법이 내장되어 있으며 HTML 문자열을 삽입하기 위해 set:* 지시문을 사용하는 구성 요소입니다.

Astro 구문과 JSX

처음에 언급했듯이 Astro 구문은 HTML의 상위 집합입니다. 이는 HTML이나 JSX를 사용하는 모든 사람에게 친숙하게 느껴지도록 설계되었습니다.
그러나 .astro 파일과 JSX 사이에는 몇 가지 주요 차이점이 있습니다.

• 속성: Astro에서는 JSX에서 사용되는 camelCase 대신 모든 HTML 속성에 대해 표준 케밥 케이스 형식을 사용하며 이는 React에서 지원하지 않는 클래스에서도 작동합니다.

• 다중 요소: Astro 구성 요소 템플릿은 모든 것을 단일

  또는 .

• 댓글: HTML 및 JavaScript 댓글이 모두 지원됩니다.

---

결론

Astro의 구문은 모든 종류의 프런트엔드 개발자가 마치 HTML이나 JSX를 사용하는 것처럼 작업할 수 있도록 하는 HTML의 슈퍼 세트입니다.
정말 놀랍고, 지금은...

즐거운 코딩하세요!✨

---

안녕하세요??
제 이름은 Vue.js 프레임워크에 열정적인 소프트웨어 개발자인 Domenico입니다. 저는 제 지식과 경험을 공유하기 위해 이에 대한 기사를 쓰고 있습니다.
내 프로젝트를 발견하려면 내 Linktree를 방문하는 것을 잊지 마세요 ??

링크트리: https://linktr.ee/domenicotenace

다른 기사를 보려면 dev.to에서 나를 팔로우하세요 ??


도메니코 테나세팔로우
IT 세계와 이와 관련된 모든 것에 대한 열정 ✌? Vue와 오픈소스에 열광하시나요?

제 콘텐츠가 마음에 드시거나 GitHub에서 제 작업을 후원하고 싶으시다면 소액 기부로 후원해 주실 수 있습니다.
감사하겠습니다 ?