setup 함수내 문자열 관련 질문입니다.

Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"

Composition API

해결된 질문

23.01.13 15:34 작성

257

아래 코드를 실행하고

Add Message1 버튼을 4번 클릭하고 Add Message 버튼을 클릭하면 {{ normalMessage }} 값은 !가 4개 붙은 값이 나옵니다. 그리고 Add Message2 버튼을 클릭하면 콘솔창에는 !가 한개 붙은 값이 나옵니다.

normalMessage 가 addNormalMesssage 함수 안에서 선언한 지역 변수도 아닌데 왜 값의 공유가 안 되는 건가요?

<template>
  <h2>setup 함수내 반응형 메시지</h2>
  <p>{{ reactiveMessage }}</p>
  <button v-on:click="reactiveMessage += '!'">Add Message</button>

  <h2>setup 함수내 일반 메시지</h2>
  <p>{{ normalMessage }}</p>
  <button v-on:click="normalMessage += '!'">Add Message1</button>
  <button v-on:click="addNormalMesssage">Add Message2</button>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const reactiveMessage = ref('Hello Reactive Message');

    let normalMessage = 'Hello Normal Message';
    const addNormalMesssage = () => {
    normalMessage = normalMessage + '!';
    console.log(normalMessage);
    };

    return {
      reactiveMessage,
      normalMessage,
      addNormalMesssage,
    };
  },
};
</script>

vuejs

답변 2

jjkim0222

질문자

2023. 01. 14. 16:15

let num = 5;
let test = function () {
  num++
  console.log(num);
};
// a.num이 가리키는 주소와 num이 가리키는 주소는 다름
let a = { num: num, test: test };
a.num++
a.num++
a.num++
console.log(a) // {num: 8, test: test()}
a.test() // 6
console.log(num) // 6

a = (function () {
  let normalMessage = 'Hello Normal Message';
  // 클로저
  const addNormalMesssage = () => {
    normalMessage = normalMessage + '!';
    console.log(normalMessage);
  };
  return {
    normalMessage,
    addNormalMesssage,
  };
})();

console.log(a) // {normalMessage : "Hello Normal Message" , addNormalMessage : ƒ }
// normalMessage 프로퍼티 값을 변경
a.normalMessage = a.normalMessage + '!'
a.normalMessage = a.normalMessage + '!'
a.normalMessage = a.normalMessage + '!'
a.normalMessage = a.normalMessage + '!'
console.log(a.normalMessage) // Hello Normal Message!!!!
a.addNormalMesssage() // Hello Normal Message!
console.log(a) // {normalMessage : "Hello Normal Message!!!!" , addNormalMessage : ƒ }

짐코딩

지식공유자

2023. 01. 14. 17:26

꼼꼼하시네요! 화이팅~!!

짐코딩

지식공유자

2023. 01. 14. 15:18

안녕하세요.

값이 반응형으로 동작하기 위해서는 반응형 API(ref, reactive 등)을 사용해야 합니다.

어떻게 보면 당연한 결과 입니다. 자바스크립트 문법 특성상 프리미티브 타입의 normalMessage는 값이 계속 더해지는 것처럼 보이지만 값을 할당할 때마다 매번 새로운 메모리로 값이 할당되기 때문입니다.

반응형으로 동작하기 위해서는 Composition API - 반응형 API를 사용해야 한다는 것에 초점을 두시면 될 것 같고요.

만약 원론적으로 조금 더 궁금하시다면 자바스크립트 Call By Reference vs Call By Value 와 같은 것을 생각해보시면 도움이 되실 것 같습니다.

인프런 커뮤니티 질문&답변

setup 함수내 문자열 관련 질문입니다.