Svelte에 대한 초심자 소개

조건부 렌더링

안녕 친구들, 이것은 프레임워크의 새로운 아이디어인 Svelte에 대한 제 시리즈의 두 번째 장입니다.

이 일련의 게시물은 누구를 가르치기 위한 것이 아니라 기본적으로 내가 주제를 더 잘 배울 수 있는 방법이므로 자유롭게 저를 굽거나 제가 실수하는 부분을 도와주세요.

조건부 렌더링이란 무엇입니까?



공식 문서에 따르면 다음과 같습니다.
"React 및 Vue와 같은 기존 프레임워크는 대부분의 작업을 브라우저에서 수행하는 반면 Svelte는 해당 작업을 앱을 빌드할 때 발생하는 컴파일 단계로 전환합니다."

다른 프레임워크에 대한 제 의견을 말할 수 없습니다. 저는 이 분야에서 정말 초보이기 때문에 당연하게 여기겠습니다!

지난 며칠 동안 나는 그것을 가지고 놀았고, 그것을 이해하고 유지하는 것이 정말 쉽다는 것과 동시에 프레임워크를 처음 접하는 경우 구문을 배우기 쉽다고 말할 수 있습니다.

제게 어려운 부분은 아니 어렵지 않습니다. 특이하다고 합시다. 다른 구성 요소와 함께 작동합니다.

나는 보통 단일 스타일 시트가 있는 단일 페이지 또는 단일 스타일 시트와 JavaScript용으로 하나의 페이지를 사용하지만, 작은 코드 덩어리로 작업하고 함께 퍼즐을 맞추는 편리함과 속도를 봅니다.

JavaScript 기능을 사용하여 이에 대한 내 지식을 활성화하는 것은 저에게 이 모든 것이 새로운 것임을 기억하십시오.

오늘 저는 다음에 대해 쓰고 있습니다: 조건부 렌더링

조건부 렌더링은 HTML에서 직접 작성하는 JavaScript 조건을 기반으로 Dom에서 요소를 표시하거나 숨기는 방식을 의미합니다.

구성 요소를 렌더링하는 것은 매우 간단합니다.

<main>

<h1>Hello World </h1>

</main>

기본if 조건은 특수 구문으로 시작합니다.

{#if isActive} // we open the condition with "#"

<h1> Your title goes here </h1> // HTML

{/if}  // We close the condition with "/"

전체 예:

<script>
  Let isActive = true;
</script>
<main>
{#if isActive}
<h1> Show your title </h1>
{/}

isActive 속성이 true이면 h1 요소를 dom으로 렌더링합니다.

이제 다른 문장, 다른 else 블록 또는 else if 블록 등을 연결할 수 있습니다.

Svelte와 함께 플레이하기에 아주 좋은 곳은 Svelte 공식 페이지의 REPL입니다. 다음 링크는 Conditional Rendering과 관련이 있습니다.

조건부 렌더링에 대한 제 기여는 여기까지입니다. 더 추가할 내용이 많이 있지만 아직 익숙하지 않기 때문에 이 첫 번째 게시물 세트는 그리 길지 않을 것입니다. Svelte를 사용한 개선 사항과 함께.

해피 할로윈!

다음 주 일요일에 뵙겠습니다. 주중에는 에서 저를 찾을 수 있습니다.