클래스 속성 하실 때, ! ? 에 대한 설명.
3632
작성한 질문수 8
! ? 를 뭐라고 부르나요??
@Prop() public parentMessage: string | undefined; // 엄격모드 시, 클래스 속성은 초기화 해줘야한다.
@Prop() private parentMessage2!: string; // ! ?
만약, 부모컴포넌트에서 내려주는 데이터들이 많으면, 위와 같이 코딩을 하면 되나요? 축약코딩법이 있는지..
예)
props: {
totalPages : Number,
currentPage : Number,
},
props: {
title: { type: String, default: '배송지 선택' },
delivery: { type: String },
callParent: { type: String, default: '' }
},
답변 1
1
1. ! ? 를 뭐라고 부르나요??
참고: !(null-forgiving or null-suppression) 연산자
(정정해주신 Jino Yim님 감사합니다.)
? -> Optional 이라고합니다. 말그대로 필수값이 아닌 옵셔널한 값이라는 뜻입니다.
사실 클래스 내부에서 프로퍼티에 쓰기에는 적합하지 않다고 생각합니다. 아마 다음 수업에서 프로퍼티에 ?를 사용하는대신 !를 사용하는 방법에 대한 내용이 포함되어 있을 것입니다.
아래 코드의 param2와 같이 같이 함수의 인자같은 곳에서 이 값이 있을수도 있고,
없을수도 있는 Optional한 값인 경우에 사용하면 좋습니다.
2. 만약, 부모컴포넌트에서 내려주는 데이터들이 많으면, 위와 같이 코딩을 하면 되나요? 축약코딩법이 있는지..
제가 질문을 잘 이해했는지 모르겠지만, title, delivery, callParent 하나하나가 데이터(props)이고,
이것의 양이 많다는 말씀이시지요?
데이터가 많아 불편하시다면 아래 코드와 같이 객체로 관리하는 것은 어떠세요?
개인적으로 저는 객체보다는 각각 프로퍼티로 나열해서 코딩하는 것이 직관적으로 확인이 되서 선호하는 편이지만,
이부분은 정답이 없으므로 취향에 따라 선택하시면 될 것같습니다.
도움이 되셨나요?
적극적으로 강의에 임해주셔서 감사드립니다 ^-^
공부하는 수강생님! 응원합니다!! 짝짝짝
👏 👏
0
'?' 마크가 Optional 과 Nullable 이 동일한 표현이고, '!' 마크는 타입 체크시 null 또는 undefined 가 들어오지 않을 것이라고 알려주는 용도 아닌가요?
앵귤러를 사용하는 개발자인데 타입스크립트 문법을 검색하다가 이곳에 닿았습니다. 포함시켜주신 링크에서도 또 문법에 대해 검색을 더 해보더라도 '!' 마크는 null 또는 undefined 일 수 없다는 의미로 사용된다고 합니다. 제가 잘못 이해한 것인지 한 번 더 검토 부탁드려요.
C# 에서 비슷한 문법을 본 것 같아 확인해보니 null 이 들어올 수 있는 곳에 null 이 아니라고 알려주는 경우나 컴파일러가 null 이 들어오지 않도록 체크하는 곳에 null 을 허용시키기 위해서 사용한다는 설명이 있네요.
0
안녕하세요?
결론부터 말씀드리면 Jino Yim님께서 말씀하신게 맞습니다.
더 자세히 설명드리면 맨 처음 질문글의 코드의 경우 선언만 하고 값 설정을 하지 않아서 IDE에서 null이나 undefind로 인식해서 타입 에러가 나게 됩니다. 실제로는 vue가 값을 설정해주기 때문에 undefinde가 아닌대도 말이죠. 이런 경우 null이나 undefind가 아니라고 표현할때 사용합니다.
답변 당시 첨부해 드렸던 typescript 문서 link가 Deprecated된 걸 보니 잘못된 정보를 찾아 전달드린것 같습니다.
혼란을 드려 대단히 죄송합니다.
정정해주신 Jino Yim님 감사드리고 제 강의 내용에도 오류가 있는 부분은 없는지
빠른 시일 내로 점검해 보도록 하겠습니다.
추가의 오해 소지를 없애도록 위해 제 원댓글의 내용은
Jino Yim님께서 알려주신 내용으로 수정하도록 하겠습니다.
감사합니다.
소스 공유좀 해주세요
0
252
0
target null 에러뜨시는 분들
0
331
0
라우터 구조잡기 소스
0
285
0
새로 추가한 인스턴스 상태 관리
0
247
0
App.vue의 $store
0
193
0
npm run serve 에러
0
221
0
Cannot find module '@/components/message.vue' or its corresponding type declarations.
0
1152
2
prop !
0
194
0
@ MutationActions
0
179
0
mapGetters 내 정의가 안되요 ㅠ
0
260
0
안녕하세요! @Prop() readonly id(느낌표):string; 에서 !(느낌표) 를 찍는 이유가 궁금합니다 :)
0
227
0
store 사용 방법 관련 질문입니다.
0
240
1
moduleA.store.ts내에서 RootState가 하는일은 무엇인가요?
0
179
0
removeItem 에서 element 가 하나 남았을 때 삭제가 되지 않는 문제
0
373
2
Property '$route' does not exist on type 'ItemList'. 이 에러는 무엇인가요..?
0
862
1
Cannot find module '@/components/message.vue'.
0
2873
6
@Action, @Mutation 등으로 지정된 변수의 타입
0
231
1
안녕하세요. 강의 잘 들었습니다.
0
168
0
Axios Post보낼때 어떤 식으로 구성하는게 좋을까요?
0
663
1
안녕하세요! v-for(v-bind:key), slice() 관련 질문이 있어요!
2
667
3
에러 표시 질문이요!
1
403
3
vuex-module-decorators 보다 오리지널 모듈 형태를 선호하시는 이유가 무엇이신가요?
1
381
2
안녕하세요. 초기 셋팅시 질문있습니다.
1
296
2
안녕하세요! Vuex, actions 질문이 있습니다.
1
305
2