Vue 컴포넌트와 라우터 [스마트인재개발원]

이번 포스팅은 스마트인재개발원 에서 교육을 받으며 랩실 스터디를 겸해서 제가 개인적으로 공부했던 내용들을 정리하려고 합니다. 이전의 랩실스터디 포스팅을 참고하시면 저의 공부 내용들을 다시 확인하실 수 있습니다!

스마트인재개발원 의 쏘피의 랩실 스터디 내용이 궁금하시다면 아래의 링크를 참조해주세요!! 😎😎

 

다음과 같은 순서로 Vue 컴포넌트와 라우터를 설명해보도록 하겠습니다!!

 

Vue 컴포넌트와 라우터

• Vue 컴포넌트에 대해
• 상위(부모) - 하위(자식) 컴포넌트의 관계
• 상위 - 하위 간 컴포넌트 데이터 전달
• Vue Router란?

 

---

컴포넌트란 다음과 같이 전역 컴포넌트와 지역 컴포넌트 두가지로 나누어 볼 수 있습니다.

프로그래밍 언어의 특징을 어느정도 알고 계신 분들이라면 전역과 지역의 차이점에 대해 이해하고 있겠지만,

다시한번 설명하자면 전역 컴포넌트는 Vue 작업 프로젝트 파일 전체에 등록하는 것으로 한 번 등록하게 되면

새 인스턴스 생성 시에 별도의 등록이 필요가 없습니다!

지역 컴포넌트는 새 인스턴스 안에 생성하는 컴포넌트 들로 여러개를 생성 할 수 있고 형태에서 알 수 있듯이

생성 된 인스턴스 안에서만 효력을 발휘 합니다.

 

Main.js 파일은 뷰 어플리케이션을 관장하는 역할을 하기 때문에
여기에 컴포넌트를 생성하게 되면 이 프로젝트 내의 어떤 vue파일에도 접근이 가능하게 됩니다.
>> 실제 개발에는 전역 컴포넌트를 쓰는 경우는 외부 라이브러리나 플러그인을 쓸 때가 대부분이라고 합니다.

 

 

컴포넌트는 각각 고유한 유효 범위를 갖고 있기 때문에 직접 다른 컴포넌트의 값을 참조할 수 없습니다.
따라서 뷰 프레임워크 자체에서 정의한 컴포넌트 데이터 전달 방법을 따라야 하는데요,
가장 기본적인 데이터 전달 방법은 바로 상위-하위 컴포넌트 간의 데이터 전달 방법 입니다.

부모는 자식에게 데이터를 전달해야 할 수도 있으며,
자식은 자신에게 일어난 일을 부모에게 알릴 필요가 있습니다.
이렇게 명확한 체계를 만들어두면 데이터 흐름을 쉽게 파악할 수 있습니다.
하위 컴포넌트의 템플릿은 상위 데이터를 직접 참조할 수 없습니다.
대신 상위 컴포넌트가 props라는 속성을 통해 데이터를 하위 컴포넌트에게 전달해 줄 수 있습니다.
이때, 하위 컴포넌트는 props 옵션을 통해 받아오게 될 props를 명시적으로 선언해야 합니다.

 

 

 

 

다음의 예시처럼 이 상태에서 msg라는 데이터를 자식 컴포넌트에게 보내주고 싶습니다.
그럴때는 자식 컴포넌트 아래에 이렇게 props를 정의해주는 것이죠.
msg를 받아올래요! 라고 적어두는 거죠.
그러면 이런식으로 일반 문자열을 전달해 줄 수 있습니다.
이렇게 하면 상위에서 데이터가 업데이트 되면 하위에서도 자동으로 업데이트 됩니다.

 

위 코드에서 v-bind:child-text라고 적은 이유는 HTML 속성은 대소 문자를 구분하지 않기 때문입니다.
따라서 문자열이 아닌 템플릿을 사용할 때는 kebab-case(하이픈으로 구분하는 것)을 써야 합니다.

 

 

 

지금까지는 상위에서 하위로 컴포넌트 데이터를 전달하는 방식에 대해 설명을 했는데요,

반대로는 어떻게 하는지도 다뤄보겠습니다.

 

아래의 그림 흐름도 처럼 데이터가 전달되는 방식을 볼 수 있습니다.

(제가 참고 영상보면서 직접 만든거에요 ㅠㅠ)

 

부모 컴포넌트의 어떠한 값을 자식 컴포넌트도 똑같이 가지게 됩니다. 이걸 데이터를 거울에 비추어 본다 라고 생각하시면 이해하시는데 도움이 될 것 같습니다.

그래서 동그란 값(모양으로 설명하겠습니다)을 자식 컴포넌트가 받아서 세모 값으로 변하는 함수를 만들었다고 가정해봅시다.

그런데 부모 컴포넌트에서 동그란 값을 마름모 값으로 바꾸게 됩니다. 그러면 그 거울을 비추고 있던 자식 컴포넌트의 동그란 값은 마름모 값으로 바뀌게 되겠죠???

그럼 동그란 값 --> 세모 값으로 바꿔주는 함수가 동작할 수가 없게 됩니다.

그래서 자식 내 컴포넌트는 부모 컴포넌트로 비춰서 받은 데이터 자체를 직접 변경하기 보다는

부모 컴포넌트에게 나 이렇게 값 바꿔줘~~ 라고 요청하는 편이 나을 것 입니다.

그것이 바로 props 요소가 되는 것이죠!

때문에 자식 컴포넌트는 어떠한 변경사항을 요청하고 싶을때 props로 부모 컴포넌트에게 신호를 보내게 되는 것입니다.

이번 포스팅에서는 컴포넌트 간의 데이터 전달 방식 까지를 알아보았습니다.

다음 포스팅에서 Vue Router에 대해 다뤄야 할 것 같아요!!

 

 

 

 

---

 

스마트인재개발원 에서의 랩실 스터디의 장점은 정규 수업시간 외에도 더 공부할 수 있도록 스터디실을 따로 마련해준다는 것입니다. 또한 스터디실 내 컴퓨터를 따로 마련해주기 때문에 수업이 끝나면 편하게 자습이 가능하고 새로운 컴퓨터로(?) 배웠던 것을 복습해보거나 또는 저처럼 평소 궁금했던 것들을 직접 해보며 공부할 수가 있어요!

그리고 필요한 강의 자료들이나 도서지원을 아낌없이 해주시기 때문에 기존의 스마트인재개발원 에서 학습하고 계신 학우님들도 랩실 스터디원 모집할때 주저하지 마시고 지원해 보시길 바라요!

 

 

 

 

 

 

 

 

---

해당 수업은 '스마트인재개발원'에서 '지능형 IoT 융합 SW 전문가 과정(NCS) 과정'에서 진행한 교육내용입니다.

 

 

스마트인재개발원