Vue Academy · 강의

반응성 기초

Vue가 반응형 의존성을 추적하는 방식을 배웁니다.

레슨 1/313개 단계

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

반응성이란 무엇인가요

반응성은 데이터가 변경될 때 Vue가 DOM을 자동으로 업데이트하는 기능입니다.

JavaScript에서 값을 변경합니다
Vue가 변경을 감지합니다
뷰가 변경 내용에 맞게 다시 렌더링됩니다

DOM을 수동으로 조작할 필요가 없습니다.

Vue가 종속성을 추적하는 방법

Vue는 종속성 추적 시스템을 사용합니다.

렌더링 중 반응형 값을 읽으면 Vue가 해당 종속성을 기록합니다
나중에 그 값이 변경되면 Vue는 어떤 렌더링을 다시 실행해야 하는지 압니다
덕분에 업데이트가 정확하고 효율적으로 이루어집니다

원시 값에 사용하는 참조

구성 API에서 참조는 하나의 값을 반응형으로 만듭니다.

import { ref } from "vue"

const count = ref(0)
const name = ref("Ada")

count.value++          // update via .value
console.log(name.value) // read via .value

템플릿에서 참조 사용하기

템플릿에서는 참조가 자동으로 래핑 해제되므로 .value를 생략합니다.

<script setup>
import { ref } from "vue"
const count = ref(0)
</script>

<template>
  <p>{{ count }}</p>
  <button @click="count++">Add</button>
</template>

객체에 사용하는 반응형 상태

반응형 객체는 전체 객체를 반응형으로 만듭니다. .value 없이 속성에 직접 접근합니다.

import { reactive } from "vue"

const state = reactive({
  count: 0,
  user: { name: "Ada" }
})

state.count++
state.user.name = "Grace"

참조와 반응형 객체 비교

둘 중 하나를 선택할 때는 다음을 고려합니다:

참조는 모든 값(원시 값과 객체)에 사용할 수 있으며 .value로 접근합니다
반응형 객체는 객체에만 사용할 수 있으며 직접 접근합니다

일관성을 위해 많은 팀이 모든 곳에서 참조를 사용하는 방식을 선호합니다.

data 옵션(Vue 2 / 옵션 API)

옵션 API는 데이터 함수를 사용합니다. 반환되는 모든 속성이 반응형이 됩니다.

export default {
  data() {
    return {
      count: 0,
      items: []
    }
  },
  methods: {
    add() { this.count++ }
  }
}

배열 반응성의 주의점

특히 Vue 2에서는 직접 배열 인덱스에 값을 할당하는 것이 까다로울 수 있습니다.

Vue 2에서는 arr[5] = x를 설정해도 업데이트가 발생하지 않았습니다
Vue 3의 프록시는 대부분의 경우를 처리하지만 여전히 주의해야 합니다

명확성과 안전성을 위해 배열 메서드를 우선 사용하세요.

반응형 배열 메서드

push, splice, pop과 같은 변경 메서드는 반응형으로 추적됩니다.

const items = reactive([1, 2, 3])

items.push(4)        // reactive
items.splice(0, 1)   // reactive

// Replacing an index in Vue 3 proxy:
items[0] = 99        // works in Vue 3

교체와 변경

배열을 업데이트하는 두 가지 방법이 있습니다:

변경: push, splice, sort를 사용합니다
교체: filter 또는 map으로 새 배열을 할당합니다

Vue 3에서는 두 방법 모두 반응성을 트리거합니다. 파생 목록에는 교체가 더 깔끔한 경우가 많습니다.

// Mutate
state.list.push(item)

// Replace with a filtered copy
state.list = state.list.filter(x => x.active)

반응성 손실 방지하기

반응형 객체를 구조 분해하면 해당 변수의 반응성이 깨집니다.

속성을 꺼내면 현재 값이 복사됩니다
구조 분해할 때도 반응성을 유지하려면 toRefs를 사용하세요

import { reactive, toRefs } from "vue"

const state = reactive({ count: 0 })

// Keeps reactivity
const { count } = toRefs(state)

빠른 확인

Vue 반응성에 대한 이해도를 확인해 보세요.

인터랙티브 레슨에서 답해보세요

복습: 반응성의 기초

Vue의 반응성이 작동하는 방식을 배웠습니다:

Vue는 각 렌더링에서 사용하는 데이터를 추적합니다
참조는 값을 반응형으로 만듭니다(JS에서는 .value를 사용합니다)
반응형 객체는 객체를 반응형으로 만듭니다(직접 접근합니다)
옵션 API는 데이터 함수를 사용합니다
반응성 손실을 방지하려면 배열 메서드와 toRefs를 사용하세요

다음: 계산 속성입니다.

무료로 시작

AI 튜터와 함께 HTML을(를) 배우세요 — 무료

브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.

코스: 42
레슨: 156

무료로 학습 시작 전체 코스 보기

자주 묻는 질문

“반응성 기초” 강의는 무료인가요?

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

“반응성 기초”에서 뭘 배우나요?

Vue가 반응형 의존성을 추적하는 방식을 배웁니다. 브라우저에서 직접 실행하는 실습 코드로 Vue Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

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

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

“반응성 기초” 강의는 얼마나 걸리나요?

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

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

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

이 강의의 모든 강의

← Vue Academy(으)로 돌아가기