diff --git a/src/api/component-instance.md b/src/api/component-instance.md index 5878e668..eef7d20c 100644 --- a/src/api/component-instance.md +++ b/src/api/component-instance.md @@ -9,7 +9,7 @@ ## $data {#data} [`data`](./options-state.html#data) 옵션에서 반환된 객체로 컴포넌트에 의해 반응형이 됩니다. -컴포넌트 인스턴스는 데이터 객체의 속성 접근을 프락시합니다. +컴포넌트 인스턴스는 데이터 객체의 속성 접근을 프록시합니다. 예를들면, 컴포넌트 인스턴스는 데이터 객체의 속성 `this.$data.a`를 `this.a`와 같이 바로 접근할 수 있도록 합니다. @@ -37,7 +37,7 @@ - **세부 사항**: [`props`](./options-state.html#props) 옵션을 통해 선언된 props만 포함됩니다. - 컴포넌트 인스턴스는 props 객체의 속성 접근을 프락시합니다. + 컴포넌트 인스턴스는 props 객체의 속성 접근을 프록시합니다. ## $el {#el} diff --git a/src/api/options-state.md b/src/api/options-state.md index f995293c..e608943e 100644 --- a/src/api/options-state.md +++ b/src/api/options-state.md @@ -17,11 +17,11 @@ - **세부 사항**: - 이 함수는 Vue에 의해 반응형으로 만들어진 일반 JavaScript 객체를 반환합니다. 인스턴스가 생성된 후, 반응형 데이터 객체는 `this.$data`로 접근할 수 있습니다. 컴포넌트 인스턴스는 데이터 객체에서 찾은 모든 속성을 프락시하므로 `this.$data.a`는 `this.a`와 동일합니다. + 이 함수는 Vue에 의해 반응형으로 만들어진 일반 JavaScript 객체를 반환합니다. 인스턴스가 생성된 후, 반응형 데이터 객체는 `this.$data`로 접근할 수 있습니다. 컴포넌트 인스턴스는 데이터 객체에서 찾은 모든 속성을 프록시하므로 `this.$data.a`는 `this.a`와 동일합니다. 모든 최상위 데이터 속성은 반환된 데이터 객체에 포함되어야 합니다. `this.$data`에 새 속성을 추가하는 것이 가능하지만 **권장되지는 않습니다**. 원하는 속성 값을 아직 사용할 수 없는 경우, `undefined` 또는 `null`과 같은 빈 값을 사용하여 Vue가 속성이 존재함을 알 수 있도록 해야 합니다. - `_` 또는 `$`로 시작하는 속성은 Vue의 내부 속성 및 API 메서드와 충돌할 수 있으므로, 컴포넌트 인스턴스에서 **프락시되지 않습니다**. 이런 경우에는 `this.$data._property`와 같은 방법으로 접근해야 합니다. + `_` 또는 `$`로 시작하는 속성은 Vue의 내부 속성 및 API 메서드와 충돌할 수 있으므로, 컴포넌트 인스턴스에서 **프록시되지 않습니다**. 이런 경우에는 `this.$data._property`와 같은 방법으로 접근해야 합니다. 브라우저 API 객체나 프로토타입 속성과 같은 고유한 상태를 저장한 객체를 반환하는 것은 **권장하지 않습니다**. 이상적으로 반환된 객체는 컴포넌트의 상태만 나타내는 일반 객체여야 합니다. diff --git a/src/api/reactivity-advanced.md b/src/api/reactivity-advanced.md index ac360137..597e3049 100644 --- a/src/api/reactivity-advanced.md +++ b/src/api/reactivity-advanced.md @@ -227,7 +227,7 @@ ## toRaw() {#toraw} -Vue에서 만든 프락시의 원시 원본 객체를 반환합니다. +Vue에서 만든 프록시의 원시 원본 객체를 반환합니다. - **타입**: @@ -237,9 +237,9 @@ Vue에서 만든 프락시의 원시 원본 객체를 반환합니다. - **세부 사항**: - `toRaw()`는 [`reactive()`](./reactivity-core#reactive), [`readonly()`](./reactivity-core#readonly), [`shallowReactive()`](#shallowreactive), [`shallowReadonly()`](#shallowreadonly)로 생성된 프락시에서 원본 객체를 반환합니다. + `toRaw()`는 [`reactive()`](./reactivity-core#reactive), [`readonly()`](./reactivity-core#readonly), [`shallowReactive()`](#shallowreactive), [`shallowReadonly()`](#shallowreadonly)로 생성된 프록시에서 원본 객체를 반환합니다. - 이것은 일시적으로 프락시의 접근/추적 오버헤드를 발생시키는 읽기/쓰기와 관련된 트리거 없이 사용하기 위한 용도입니다. + 이것은 일시적으로 프록시의 접근/추적 오버헤드를 발생시키는 읽기/쓰기와 관련된 트리거 없이 사용하기 위한 용도입니다. 원본 객체의 영구 참조를 유지하는 것은 **권장되지 않습니다**. 주의해서 사용해야 합니다. @@ -254,7 +254,7 @@ Vue에서 만든 프락시의 원시 원본 객체를 반환합니다. ## markRaw() {#markraw} -객체가 프락시로 변환되지 않도록 마크(mark)합니다. +객체가 프록시로 변환되지 않도록 마크(mark)합니다. 객체 자체를 반환합니다. - **타입**: @@ -277,21 +277,21 @@ Vue에서 만든 프락시의 원시 원본 객체를 반환합니다. :::warning 주의해서 사용 `markRaw()`나 `shallowReactive()` 같이 얕은 API를 사용하면, 선택적으로 기본적인 내부 깊숙이까지의 "반응형"/"읽기 전용" 변환을 옵트아웃(opt-out)하여, - 상태 그래프(선언/정의/사용하는 곳)에 프락시 되지 않은 원시 객체를 포함할 수 있습니다. + 상태 그래프(선언/정의/사용하는 곳)에 프록시 되지 않은 원시 객체를 포함할 수 있습니다. 이것들은 다양한 이유로 사용될 수 있습니다: - 일부 값들은 함부로 반응형으로 만들면 안되는데, 그 예로 복잡한 타사의 클래스 인스턴스나 Vue 컴포넌트 객체가 있습니다. - - 프락시 변경을 건너뛰면, + - 프록시 변경을 건너뛰면, 변경해서는 안되는 데이터 소스를 포함하고 있는 커다란 리스트를 렌더링할 때, 성능이 향상될 수 있습니다. 원시(raw) 옵트아웃은 루트 레벨에만 있기 때문에 고급으로 간주되므로, 마크되지 않은 중첩된 원시 객체를 반응형 객체로 설정한 다음 다시 접근을 시도하면, - 프락시 버전의 객체로 접근하게 됩니다. + 프록시 버전의 객체로 접근하게 됩니다. 이것은 동일한 객체에 참조했다고 예상했으나, - 원시 버전과 프락시 버전을 혼용하여 사용하는 "**잘못된 ID 참조**(identity hazards)"로 이어질 수 있습니다. + 원시 버전과 프록시 버전을 혼용하여 사용하는 "**잘못된 ID 참조**(identity hazards)"로 이어질 수 있습니다. ```js const foo = markRaw({ diff --git a/src/api/reactivity-core.md b/src/api/reactivity-core.md index 2f797050..cdb73d5f 100644 --- a/src/api/reactivity-core.md +++ b/src/api/reactivity-core.md @@ -116,7 +116,7 @@ getter 함수를 사용하며, getter로부터 반환된 값을 읽기 전용 ## reactive() {#reactive} -객체의 반응형 프락시(proxy)를 반환합니다. +객체의 반응형 프록시(proxy)를 반환합니다. - **타입**: @@ -132,7 +132,7 @@ getter 함수를 사용하며, getter로부터 반환된 값을 읽기 전용 내부 깊은 곳까지의 변환은 피하고 루트 수준에서만 반응형을 유지하려면, [shallowReactive()](./reactivity-advanced#shallowreactive)를 사용해야 합니다. - 반환된 객체와 중첩된 객체는 [프락시(Proxy)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)로 래핑되므로, 원본 객체와 **동일하지 않습니다**. 그러므로 반응형 프락시로만 작업하고, 원본 객체에 의존하지 않는 것이 좋습니다. + 반환된 객체와 중첩된 객체는 [프록시(Proxy)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)로 래핑되므로, 원본 객체와 **동일하지 않습니다**. 그러므로 반응형 프록시로만 작업하고, 원본 객체에 의존하지 않는 것이 좋습니다. - **예제** @@ -193,7 +193,7 @@ getter 함수를 사용하며, getter로부터 반환된 값을 읽기 전용 ## readonly() {#readonly} -객체(반응형 또는 일반) 또는 [ref](#ref)를 가져와서 원본에 대한 읽기 전용 프락시를 반환합니다. +객체(반응형 또는 일반) 또는 [ref](#ref)를 가져와서 원본에 대한 읽기 전용 프록시를 반환합니다. - **타입**: @@ -205,7 +205,7 @@ getter 함수를 사용하며, getter로부터 반환된 값을 읽기 전용 - **세부 사항**: - 읽기 전용 프락시는 접근하게 될 모든 중첩 속성 깊숙이까지 읽기 전용입니다. 또한 `reactive()`처럼 ref를 언래핑하며, 언래핑 값도 읽기 전용으로 변환됩니다. + 읽기 전용 프록시는 접근하게 될 모든 중첩 속성 깊숙이까지 읽기 전용입니다. 또한 `reactive()`처럼 ref를 언래핑하며, 언래핑 값도 읽기 전용으로 변환됩니다. 내부 깊은 곳까지의 변환을 피하려면, [shallowReadonly()](./reactivity-advanced#shallowreadonly)를 사용해야 합니다. diff --git a/src/api/reactivity-utilities.md b/src/api/reactivity-utilities.md index d93fb559..240678bd 100644 --- a/src/api/reactivity-utilities.md +++ b/src/api/reactivity-utilities.md @@ -244,7 +244,7 @@ This can be used in [Composables](/guide/reusability/composables.html) to normal ## isProxy() {#isproxy} -객체가 [`reactive()`](./reactivity-core.html#reactive), [`readonly()`](./reactivity-core.html#readonly), [`shallowReactive()`](./reactivity-advanced.html#shallowreactive) 또는 [`shallowReadonly()`](./reactivity-advanced.html#shallowreadonly)에 의해 생성된 프락시인지 확인합니다. +객체가 [`reactive()`](./reactivity-core.html#reactive), [`readonly()`](./reactivity-core.html#readonly), [`shallowReactive()`](./reactivity-advanced.html#shallowreactive) 또는 [`shallowReadonly()`](./reactivity-advanced.html#shallowreadonly)에 의해 생성된 프록시인지 확인합니다. - **타입**: @@ -254,7 +254,7 @@ This can be used in [Composables](/guide/reusability/composables.html) to normal ## isReactive() {#isreactive} -객체가 [`reactive()`](./reactivity-core.html#reactive) 또는 [`shallowReactive()`](./reactivity-advanced.html#shallowreactive)에 의해 생성된 프락시인지 확인합니다. +객체가 [`reactive()`](./reactivity-core.html#reactive) 또는 [`shallowReactive()`](./reactivity-advanced.html#shallowreactive)에 의해 생성된 프록시인지 확인합니다. - **타입**: diff --git a/src/api/sfc-script-setup.md b/src/api/sfc-script-setup.md index bade1127..f3e5a4ef 100644 --- a/src/api/sfc-script-setup.md +++ b/src/api/sfc-script-setup.md @@ -4,7 +4,7 @@ - 더 적은 상용구로 더 간결한 코드 - 순수 TypeScript를 사용하여 props 및 내보낼(emit) 이벤트를 선언하는 기능 -- 더 나은 런타임 성능(템플릿은 중간 프락시 없이 동일한 범위의 렌더 함수로 컴파일됨) +- 더 나은 런타임 성능(템플릿은 중간 프록시 없이 동일한 범위의 렌더 함수로 컴파일됨) - 더 나은 IDE 타입 추론 성능(언어 서버가 코드에서 타입을 추출하는 작업 감소) ## 기본 문법 {#basic-syntax} diff --git a/src/glossary/index.md b/src/glossary/index.md index 69f1a2ef..ec2ec51c 100644 --- a/src/glossary/index.md +++ b/src/glossary/index.md @@ -254,15 +254,15 @@ Vue에서는 "프롭(prop)"이라는 용어를 세 가지 주요 상황에서 자세한 내용은 다음을 참조하세요: - [가이드 - provide / inject](/guide/components/provide-inject.html) -## 반응형 이팩트 (Reactive Effect) {#reactive-effect} +## 반응형 이펙트 (Reactive Effect) {#reactive-effect} -반응형 이팩트는 Vue의 반응성 시스템의 일부입니다. 이는 함수의 종속성(dependency)을 추적하고, 해당 종속성의 값이 변경될 때마다 해당 함수를 다시 실행하는 과정을 의미합니다. +반응형 이펙트는 Vue의 반응성 시스템의 일부입니다. 이는 함수의 종속성(dependency)을 추적하고, 해당 종속성의 값이 변경될 때마다 해당 함수를 다시 실행하는 과정을 의미합니다. -`watchEffect()`는 반응형 이팩트를 직접적으로 생성하는 가장 간단한 방법입니다. Vue의 다양한 다른 부분들도 내부적으로 이팩트를 사용합니다. 예를 들어, 컴포넌트 렌더링 업데이트, `computed()`와 `watch()` 등이 있습니다. +`watchEffect()`는 반응형 이펙트를 직접적으로 생성하는 가장 간단한 방법입니다. Vue의 다양한 다른 부분들도 내부적으로 이펙트를 사용합니다. 예를 들어, 컴포넌트 렌더링 업데이트, `computed()`와 `watch()` 등이 있습니다. -Vue는 반응형 종속성을 반응형 이팩트 내부에서만 추적할 수 있습니다. 만약 속성의 값을 반응형 이팩트 외부에서 읽는다면, 해당 속성이 이후에 변경되어도 Vue는 무엇을 해야 할지 모를 것입니다. 이런 의미에서 속성은 '반응성'을 '잃게' 됩니다. +Vue는 반응형 종속성을 반응형 이펙트 내부에서만 추적할 수 있습니다. 만약 속성의 값을 반응형 이펙트 외부에서 읽는다면, 해당 속성이 이후에 변경되어도 Vue는 무엇을 해야 할지 모를 것입니다. 이런 의미에서 속성은 '반응성'을 '잃게' 됩니다. -이 용어는 '부작용(side effect)'에서 유래되었습니다. 이팩트 함수를 호출하는 것은 속성 값이 변경되는 것의 부작용입니다. +이 용어는 '부작용(side effect)'에서 유래되었습니다. 이펙트 함수를 호출하는 것은 속성 값이 변경되는 것의 부작용입니다. 자세한 내용은 다음을 참조하세요: - [가이드 - 깊이 있는 반응성](/guide/extras/reactivity-in-depth.html) diff --git a/src/guide/best-practices/performance.md b/src/guide/best-practices/performance.md index da656230..8d3a7bed 100644 --- a/src/guide/best-practices/performance.md +++ b/src/guide/best-practices/performance.md @@ -187,7 +187,7 @@ const computedObj = computed((oldValue) => { ### 큰 불변 구조에 대한 반응성 오버헤드 감소 {#reduce-reactivity-overhead-for-large-immutable-structures} -Vue의 반응형 시스템은 기본적으로 깊습니다. 이러면 상태 관리가 직관적이지만, 데이터 크기가 클 경우 특정 수준의 오버헤드가 발생하는데, 이것은 모든 속성 접근이 의존성 추적을 수행하는 프락시 트랩을 트리거하기 때문입니다. 이것은 일반적으로 깊이 중첩된 객체의 큰 배열을 처리할 때, 단일 렌더가 100,000개 이상의 속성에 접근하는 경우 눈에 띄게 나타나므로, 매우 특정한 사용 사례에만 영향을 미칩니다. +Vue의 반응형 시스템은 기본적으로 깊습니다. 이러면 상태 관리가 직관적이지만, 데이터 크기가 클 경우 특정 수준의 오버헤드가 발생하는데, 이것은 모든 속성 접근이 의존성 추적을 수행하는 프록시 트랩을 트리거하기 때문입니다. 이것은 일반적으로 깊이 중첩된 객체의 큰 배열을 처리할 때, 단일 렌더가 100,000개 이상의 속성에 접근하는 경우 눈에 띄게 나타나므로, 매우 특정한 사용 사례에만 영향을 미칩니다. Vue는 [`shallowRef()`](/api/reactivity-advanced.html#shallowref) 및 [`shallowReactive()`](/api/reactivity-advanced.html#shallowreactive)를 사용하여, 깊은 반응형을 opt-out하는 탈출구를 제공합니다. 얕은 API는 루트 수준에서만 반응하는 상태를 생성하고, 모든 중첩된 객체를 그대로 노출합니다. 이렇게 하면 중첩된 속성에 빠르게 접근할 수 있으며, 모든 중첩된 객체는 변경할 수 없는 것처럼 처리해야 하고, 루트 상태를 교체해야만 업데이트가 트리거될 수 있습니다: diff --git a/src/guide/components/props.md b/src/guide/components/props.md index 44f56f08..a03c8135 100644 --- a/src/guide/components/props.md +++ b/src/guide/components/props.md @@ -519,6 +519,7 @@ props는 컴포넌트 **인스턴스가 생성되기 전**에 유효성 검사 - `Date` - `Function` - `Symbol` +- `Error` 또한 `type`은 사용자 정의 클래스 또는 생성자 함수일 수도 있으며, `instanceof`를 사용하여 검사를 실시합니다. 예를 들어, 다음 클래스가 주어졌을 때: diff --git a/src/guide/essentials/reactivity-fundamentals.md b/src/guide/essentials/reactivity-fundamentals.md index c067111f..1c946386 100644 --- a/src/guide/essentials/reactivity-fundamentals.md +++ b/src/guide/essentials/reactivity-fundamentals.md @@ -17,7 +17,7 @@ outline: deep 옵션 API에서는 `data` 옵션을 사용하여 컴포넌트의 반응형 상태를 선언합니다. 옵션 값은 객체를 반환하는 함수여야 합니다. Vue는 새 컴포넌트 인스턴스를 만들 때 함수를 호출하고, 반환된 객체를 반응형 시스템에 래핑합니다. -이 객체 내 모든 속성은 해당 컴포넌트 인스턴스(메서드 및 생명 주기 훅에서 `this`)에서 최상위에 프락시(proxy)되어 노출됩니다. +이 객체 내 모든 속성은 해당 컴포넌트 인스턴스(메서드 및 생명 주기 훅에서 `this`)에서 최상위에 프록시(proxy)되어 노출됩니다. ```js{2-6} export default { @@ -71,7 +71,7 @@ export default { } ``` -`newObject` 객체를 `this.someObject`에 할당 후 접근할 경우, 이 값은 원본을 반응형으로 재정의한 프락시 객체입니다. +`newObject` 객체를 `this.someObject`에 할당 후 접근할 경우, 이 값은 원본을 반응형으로 재정의한 프록시 객체입니다. **Vue 2와 달리 원본 `newObject` 객체는 그대로 유지되며, 반응형으로 변하지 않습니다. 항상 `this`를 통해 반응형 상태의 속성에 접근해야 합니다.** @@ -410,7 +410,7 @@ const state = reactive({ count: 0 }) ### 반응형 재정의 vs. 원본 \*\* {#reactive-proxy-vs-original-1} -`reactive()`의 반환 값은 원본 객체와 같지 않고 원본 객체를 재정의한 [프락시](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)(Proxy)라는 점을 유의하는 것이 중요합니다. +`reactive()`의 반환 값은 원본 객체와 같지 않고 원본 객체를 재정의한 [프록시](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)(Proxy)라는 점을 유의하는 것이 중요합니다. ```js const raw = {} @@ -420,22 +420,22 @@ const proxy = reactive(raw) console.log(proxy === raw) // false ``` -프락시만 반응형입니다. +프록시만 반응형입니다. 원본 객체를 변경해도 업데이트가 트리거되지 않습니다. -따라서 객체를 Vue의 반응형 시스템으로 작업할 때 가장 좋은 방법은 **상태를 재정의한 프락시만 사용**하는 것입니다. +따라서 객체를 Vue의 반응형 시스템으로 작업할 때 가장 좋은 방법은 **상태를 재정의한 프록시만 사용**하는 것입니다. -프락시에 대한 일관된 접근을 보장하기 위해, 원본 객체를 `reactive()` 한 프락시와 프락시를 `reactive()` 한 프락시는 동일한 프락시를 반환하도록 동작합니다. +프록시에 대한 일관된 접근을 보장하기 위해, 원본 객체를 `reactive()` 한 프록시와 프록시를 `reactive()` 한 프록시는 동일한 프록시를 반환하도록 동작합니다. ```js -// 객체를 reactive() 한 반환 값과 프락시는 동일합니다. +// 객체를 reactive() 한 반환 값과 프록시는 동일합니다. console.log(reactive(raw) === proxy) // true -// 프락시를 reactive()한 반환 값과 프락시는 동일합니다. +// 프록시를 reactive()한 반환 값과 프록시는 동일합니다. console.log(reactive(proxy) === proxy) // true ``` 이 규칙은 중첩된 객체에도 적용됩니다. -내부 깊숙이까지 반응형이므로 반응형 객체 내부의 중첩된 객체도 프락시입니다: +내부 깊숙이까지 반응형이므로 반응형 객체 내부의 중첩된 객체도 프록시입니다: ```js const proxy = reactive({}) diff --git a/src/guide/essentials/watchers.md b/src/guide/essentials/watchers.md index b6f040bb..697c78a0 100644 --- a/src/guide/essentials/watchers.md +++ b/src/guide/essentials/watchers.md @@ -285,6 +285,40 @@ watch( +## 일회성 감시자 {#once-watchers} + +감시하는 소스가 변경될 때마다 감시자의 콜백이 실행됩니다. 소스가 변경될 때 콜백이 한 번만 트리거되길 원한다면, `once: true` 옵션을 사용해야 합니다. + +
+ +