인프런 커뮤니티 질문&답변
작성한 질문수
클래스 속성 하실 때, ! ? 에 대한 설명.
작성
·
3.5K
1
! ? 를 뭐라고 부르나요??
@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)이고,
이것의 양이 많다는 말씀이시지요?
데이터가 많아 불편하시다면 아래 코드와 같이 객체로 관리하는 것은 어떠세요?
개인적으로 저는 객체보다는 각각 프로퍼티로 나열해서 코딩하는 것이 직관적으로 확인이 되서 선호하는 편이지만,
이부분은 정답이 없으므로 취향에 따라 선택하시면 될 것같습니다.
도움이 되셨나요?
적극적으로 강의에 임해주셔서 감사드립니다 ^-^
공부하는 수강생님! 응원합니다!! 짝짝짝
👏 👏
안녕하세요?
결론부터 말씀드리면 Jino Yim님께서 말씀하신게 맞습니다.
더 자세히 설명드리면 맨 처음 질문글의 코드의 경우 선언만 하고 값 설정을 하지 않아서 IDE에서 null이나 undefind로 인식해서 타입 에러가 나게 됩니다. 실제로는 vue가 값을 설정해주기 때문에 undefinde가 아닌대도 말이죠. 이런 경우 null이나 undefind가 아니라고 표현할때 사용합니다.
답변 당시 첨부해 드렸던 typescript 문서 link가 Deprecated된 걸 보니 잘못된 정보를 찾아 전달드린것 같습니다.
혼란을 드려 대단히 죄송합니다.
정정해주신 Jino Yim님 감사드리고 제 강의 내용에도 오류가 있는 부분은 없는지
빠른 시일 내로 점검해 보도록 하겠습니다.
추가의 오해 소지를 없애도록 위해 제 원댓글의 내용은
Jino Yim님께서 알려주신 내용으로 수정하도록 하겠습니다.
감사합니다.
'?' 마크가 Optional 과 Nullable 이 동일한 표현이고, '!' 마크는 타입 체크시 null 또는 undefined 가 들어오지 않을 것이라고 알려주는 용도 아닌가요?
앵귤러를 사용하는 개발자인데 타입스크립트 문법을 검색하다가 이곳에 닿았습니다. 포함시켜주신 링크에서도 또 문법에 대해 검색을 더 해보더라도 '!' 마크는 null 또는 undefined 일 수 없다는 의미로 사용된다고 합니다. 제가 잘못 이해한 것인지 한 번 더 검토 부탁드려요.
C# 에서 비슷한 문법을 본 것 같아 확인해보니 null 이 들어올 수 있는 곳에 null 이 아니라고 알려주는 경우나 컴파일러가 null 이 들어오지 않도록 체크하는 곳에 null 을 허용시키기 위해서 사용한다는 설명이 있네요.
!(null-forgiving or null-suppression) 연산자