인프런 커뮤니티 질문&답변
작성한 질문수
clearNuxtState() 사용 문의
작성
·
33
0
<q-btn label="clear" @click="clearNuxtState()" />안녕하세요.
Nuxt 상태관리 : useState() 강의를 듣던 중 그대로 코딩을 따라했는데요.
clearNuxtState() 이 버튼을 생성하자 이 메서드에서 사용할수 없다고 빨간색으로 표시 되는데요.
ERROR(vue-tsc) Property 'clearNuxtState' does not exist on type 'CreateComponentPublicInstanceWithMixins<ToResolvedProps<{}, {}>, { counter: Ref<number, number>; sameCounter: Ref<number, number>; }, {}, {}, {}, ComponentOptionsMixin, ... 19 more ..., {}>'.
FILE /Users/Documents/workspace/onego-front/pages/about.vue:43:42
41 | </div>
42 | <div>
> 43 | <q-btn label="clear" @click="clearNuxtState()" />
| ^^^^^^^^^^^^^^
44 | </div>
45 | </div>
46 |
[vue-tsc] Found 1 error. Watching for file changes.
이와 같이 에러가 나는데요..왜 나는지 도저히 모르겠네요.. 짐코딩님 repository에서 about 페이지 소스 그대로 복사해서 붙여놨는데도 해당부분에 빨간색이 나오더라고요 ㅠ
답변 1
0
JavaScript 함수를 다루는 기본 개념을 설명드리겠습니다:
<!-- 틀린 방법 -->
@click="clearNuxtState()" // ❌ 즉시 실행되어 버림
<!-- 올바른 방법 -->
@click="clearNuxtState" // ✅ 클릭할 때만 실행clearNuxtState()처럼 괄호를 붙이면 페이지가 로드될 때 즉시 함수가 실행되어 버립니다. 이는 마치 "함수를 실행한 결과"를 클릭 이벤트에 바인딩하는 것과 같죠.
반면 clearNuxtState처럼 괄호 없이 작성하면 "함수 자체"를 클릭 이벤트에 바인딩하는 것이므로, 클릭할 때만 함수가 실행됩니다.