02. 컴포넌트는 read-only지만 props와 $emit이 있다면 무엇이든 할 수 있어
지야~ 세 번째 게시물인데 벌써 귀찮네요 창 열어놓고 한참을 괴로워하다가 씁니다 안 쓰면 배운 걸 제가 다 까먹을 것 같아서,,
지난 게시물 기준으로 모달창을 만들고 v-if를 사용해서 동적인 UI를 만드는 것까지 한 거 같은데요 아님 말고
그 이후엔 모달창 안에 상세 내용을 채워넣었습니다. 각 상품에 관한 데이터가 차곡차곡 정리된 파일을 따로 저장하고 export처리 해놓고 그걸 App.vue에서 import하는 일련의 과정을 성공했다는 말이죠~
그보다도 import된 파일이 아주 많지요? 그게 이번 글의 핵심인 컴포넌트를 위함이랍니다~? 컴포넌트란 무엇이냐~라고 물어보신다면 대답해드리는 게 인지상정이겠지요~ 이전 게시물을 보면 App.vue 파일에 참 많은 태그들이 있었다 그쵸? 열릴 지 안 열릴 지 모르는 슈뢰딩거의 모달창이 있었고 상품이미지와 제목, 가격이 쓰인 <div>태그도 있었고 파일 하나에 다 때려박기엔 퍽 부담이라 이 말이죠 그래서 그런 태그들을 좀 더 깔끔하게! 획기적으로! 줄이기 위해 컴포넌트를 배웠습니다
일단 간단한 예시로 메인페이지에 광고 배너를 하나 만들어 본다고 하면,,~
요런 태그들이 들어가겠지요 근데 이걸 한 줄로 줄일 수 있다?! 절 대 못 참 지 바로 "컴포넌트 on" 컴포넌트를 사용하면
TA DA- 정말 딱 이 한 줄로 줄여진답니다? 그치만 그냥 냅다 줄이면 안되겠지요~ 컴포넌트를 사용하는데엔 쓰리-스텝이 있는데요,
1. 컴포넌트로 쓸 .vue 파일을 생성해서 그 안에 내용을 채워 넣고
2. 컴포넌트를 쓸 .vue 파일에 import 및 등록하고
3. 컴포넌트를 사용하면 됩니다
할인 배너로 예를 들자면,
이렇게 할인 배너 내용이 들어간 DiscountBanner.vue 파일을 만드는 게 첫번째! 스타일 태그는 App.vue 파일에 작성해둔 걸로 작동하니 굳이 옮기지 않아주도록 합시다 귀찮으니까,,, 그리고 스크립트 부분에 name : "DiscountBanner" 는 일단 하란 대로 입력했습니다. 이유는 몰라레후~ 뒤에 만들 컴포넌트 파일에도 예외 없이 들어있답니다. 이 다음엔
이렇게 App.vue 파일에 import 및 컴포넌트 등록을 해줍니다. 그 뒤엔 아까 <DiscountBanner/> 처럼 사용만 하면 됩니다. 그래서 이제 원래 있던 태그들도 전부 컴포넌트로 만들어 보았는데요 뭔가 문제가 있었달까,,데이터 바인딩과 관련된 것입니다.
여기서 props와 관련된 설명이 필요한데 그걸 설명하려면 또 props를 사용하지 않아서 오류가 나는 코드와 props를 사용해서 말끔하게 해결된 코드가 필요한데 전자를 캡처해두지도 않았고 그 상태를 다시 만들 만큼의 정성이 저에겐 없으니 전부 생략하고 props와 &emit 문법에 대한 설명만 하도록 할까요? 어차피 뭔가 배우고자 이걸 보는 아닐테니까ㅎㅎ,,,,
여튼 컴포넌트 파일에서 데이터를 쓸거면!
이렇게 "나 이런 데이터 쓸거야"라고 적어주시고, (쓸 테이터 명 : 데이터 타입)을 명시해준 다음에
컴포넌트를 쓸 때 해당 태그에 :사용할 데이터 이름(마음대로 해도 됨) = '사용할 데이터(앞서 명시한 데이터 명)'을 적어주도록 합시다 그럼 끝! 근데
컴포넌트는 read-only라서 @click등의 문법을 통해 데이터를 조작하려면 에러가 뜨거나 웹에서 작동하지 않는 불상사가 발생합니다. 이럴 땐 부모 컴포넌트에게 "나 이 데이터 쓸거야"라고 불효를 저지르고 부모 컴포넌트가 "그래 네 말 알았다 갖다 써라"와 같은 일련의 과정이 필요합니다. 이게 바로 $emit인데요
요런 식으로 자식 컴포넌트에서 "$emit('보내는 메시지', 보내는 데이터)"를 입력해주고!
이렇게 부모 컴포넌트에서 메시지가 왔을 때 동작할 코드를 입력해주시면 된다~
정말 귀찮아서 이래 저래 많이 생략했는데 그래도 복습이 돼서 무척이나 좋네요 컴포넌트를 사용하는 쓰리-스텝이 아리까리 하기도 하고 props를 사용할 때 자식 컴포넌트에 props 데이터 등록을 하는 것도 헷갈리는데 다시 짚고 갈 수 있어서 좋았습니다. 위에 제대로 설명해두지 않아서 무슨 소린 지 잘 모르시겠죠? 근데 그게 알빠노,,,? 내가 좋다는데,,,
아니 사실 $emit으로 모달창 띄우고 내리고 막 잘 돼야 하는데 대 소문자 잘못 입력해서 하루 종일 고통 받다 보니 대충 쓰게 됐습니다. 딱히 죄송하진 않음 누가 볼 것도 아니고. 여튼 끝