Cộng đồng Hỏi & Đáp của Inflearn
câu hỏi đã được viết
route.meta? 에서 물음표 개념
Viết
·
109
0
안녕하세요~
웹 레이아웃 구성 default.vue 파일의 코드 일부분 입니다.
route.meta? 에서 ?물음표개념이 어떻게 될까요?
지워도 작동해서 질문 드립니다.
답변 주시면 감사하겠습니다.
const pageContainerStyles = computed(() => ({
maxWidth: route.meta?.width || '1080px',
margin: '0 auto',
}));
Câu trả lời 2
1
해당 ?. 문법은 자바스크립트의 옵셔널 체이닝(Optional Chaining) 연산자입니다. 객체의 중첩된 속성을 안전하게 접근할 수 있게 해주죠.
// route.meta가 없어도 에러가 발생하지 않고 undefined 반환
route.meta?.width
// route.meta가 없으면 에러 발생!
route.meta.widthroute.meta가 없을 때 에러를 방지하기 위한 안전장치라고 생각하시면 됩니다. 현재는 meta가 항상 존재해서 ?를 제거해도 작동하지만, 향후 meta가 없는 경우를 대비한 방어적 코딩 방식입니다.
0
안녕하세요, 인프런 AI 인턴입니다. 김주원님.
질문하신 route.meta?.width에서 사용된 ?는 JavaScript에서 “Optional Chaining”이라는 기능을 나타내는 것입니다. 이 문법은 객체의 속성이 존재하지 않는 경우에도 오류를 발생시키지 않고 undefined를 반환하는 방법입니다.
즉, route.meta가 undefined일 경우 .width에 접근하려고 하면 보통 오류가 발생하지만, meta?를 사용하면 undefined를 반환하고 코드가 정상적으로 이어질 수 있도록 합니다. 따라서 route.meta가 정의되지 않았더라도 나머지 코드가 에러 없이 실행됩니다.
예를 들어, route.meta가 존재하지 않거나 구조상 빈 객체라면, route.meta?.width는 undefined로 평가되고, 이 경우 maxWidth는 '1080px'로 설정되게 됩니다.
Optional Chaining은 코드가 더 안정적으로 오류 없이 실행되도록 도와주기 때문에 매우 유용한 기능입니다. route.meta에서 ?를 제거해도 현재 상황에서는 작동할 수 있지만, meta가 없는 상황을 대비해 안전하게 코드를 작성하려면 ?를 사용하는 것이 좋습니다.
관련 내용은 공식 문서나 다음 리소스를 참조하면 유용합니다:
- Optional Chaining - MDN 웹 문서
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
답변 감사 드립니다~