0Pricing
Sveltejs Academy · 강의

let을 사용한 반응형 변수

일반적인 let 선언을 사용해 Svelte에서 반응형 상태를 선언합니다.

let을 사용한 반응형 변수은(는) CoddyKit의 무료 Sveltejs Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Sveltejs Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Sveltejs Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

특별한 API 없음

Svelte에서는 script 블록의 일반적인 let 선언이 반응형입니다. useState에 해당하는 기능은 없습니다.

선언하고 사용하기

변수를 선언하고 마크업에서 보간하세요. 변수를 업데이트하면 해당 변수에 의존하는 부분이 다시 렌더링됩니다.

<script>
  let count = 0;
</script>

<p>The count is {count}</p>

할당으로 업데이트

할당이 트리거입니다. count = count + 1은 값이 변경되었다는 사실을 Svelte에 알립니다.

function inc() { count = count + 1; }

증가 축약형

표준 JS 축약형도 작동합니다. count++, count += 5 등이 있습니다.

function inc() { count++; }

배열과 변경

push를 사용해 배열을 변경해도 반응성이 NOT 작동합니다. 다시 할당해야 합니다.

items = [...items, newItem];   // ok
items.push(newItem);            // does not update

객체와 변경

객체에도 같은 규칙이 적용됩니다. 참조를 바꾸거나 특정 속성과 상위 객체를 다시 할당해야 합니다.

user.name = "Bea";
user = user;   // tell Svelte it changed

할당이 중요한 이유

Svelte 컴파일러는 할당 연산자를 계측합니다. push와 같은 메서드 호출은 컴파일러가 감지할 수 없습니다.

로컬 상태와 공유 상태

일반적인 let은 하나의 컴포넌트 인스턴스에 국한된 상태를 만듭니다. 컴포넌트 간에 공유하려면 props 또는 stores를 사용하세요.

초기값

let 선언의 오른쪽 부분은 컴포넌트 인스턴스가 초기화될 때 한 번 실행됩니다.

타입 지정

lang="ts"를 사용한다면 변수에 명시적인 타입을 지정하세요.

<script lang="ts">
  let count: number = 0;
</script>

여러 변수

원하는 만큼 반응형 변수를 한 줄 또는 여러 줄에 선언할 수 있습니다.

let x = 0, y = 0;
let items = [];

빠른 확인

반응성을 트리거하는 것은 무엇인가요?

요약

일반적인 let은 반응형입니다. 업데이트를 트리거하려면 변경하지 말고 다시 할당하세요. 배열과 객체는 참조가 변경되어야 합니다.

자주 묻는 질문

“let을 사용한 반응형 변수” 강의는 무료인가요?

네 — “let을 사용한 반응형 변수” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Sveltejs Academy 강의 전체를 잠금 해제할 수 있습니다. Sveltejs Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“let을 사용한 반응형 변수”에서 뭘 배우나요?

일반적인 let 선언을 사용해 Svelte에서 반응형 상태를 선언합니다. 브라우저에서 직접 실행하는 실습 코드로 Sveltejs Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Sveltejs Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Sveltejs Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“let을 사용한 반응형 변수” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Sveltejs Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Sveltejs Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. script template style 구조
  2. let을 사용한 반응형 변수
  3. 보간: {expression}
  4. 계산된 값: $: 반응형 선언
← Sveltejs Academy(으)로 돌아가기