본문의 글은 [ SASS 링크 ] 이 글과 연결됩니다.
//
저는 전 회사에서 javascript, jquery로 프론트 개발했었구요,
Vue 사용하는 회사에 오면서 느낀 얘네들의 장점은 다음과 같아요.
(1) 변수값을 바꾸면, 화면이 알아서 바뀐다.
(2) 컴포넌트를 만들기 쉽다. 입니다.
///
(1) 화면에 있는 데이터값을 바꾸려면..?
var inputDom = document.getElementById("input-only-number");
inputDom.value = "999";
var spanDom = document.getElementById("my-span");
spanDom.innerText = "hongildon@domain.com";
jquery는 $(selector).html(contets)이었나요? 아마 그랬을거에요.
그래서 페이지에 데이터 하나 넣어주려면...
반드시 마지막에 setHtml(); 같은 함수 하나 별도로 빼서
꼬박꼬박 innerText나 $().html()같은거 해야했어요.
게다가 이런거 하려면...
let datas = [
{
title: "손녀의 사진 속에 담긴 어쩌구...",
subtitle: "이야기를 담은 사진들"
},
{
title: "손녀의 사진 속에 담긴 어쩌구...",
subtitle: "이야기를 담은 사진들"
},
];
let html = "";
for(let i = 0 ; i < datas.length ; i++ ) {
html += '<div class="naver-middle-menu">'
html += '<span class="title">' + datas.title + '</span>'
html += '<span class="title">' + datas.subtitle + '</span>'
html += '/<div">'
}
document.getElementById("naver-middle").innerHTML = html;
정말로 이런식으로 했어요. data만 서버한테서 받아왔다고 가정하고.. 저렇게 했어요.
항상.. 뭘 하건간에.. 마지막엔 innerHTML이나 $(selector).html()이 필요한게 너무 귀찮지않나요?
그래서 React, Vue는 이런걸 편하게 해줍니다.
Vue의 문법은 이런느낌입니다.
이런 이메일을 보여주기 위해서,
<span v-text="email"></span>
email = "honggildong@domain.com";
이렇게 할 수 있습니다.
email이라는 변수는 javascript의 변수인대요,
저 변수의 값을 다른값으로 바꾸면,
email = "another@domain.com";
이렇게 알아서 화면도 바뀝니다.
별도의 다른코드가 필요가없어요.
//
(2)를 위한 예제는,
숫자만 입력되고, 4자리까지만 입력되는 인풋박스를 만드는걸로 할게요.
기존회사에서는 거래비밀번호를 숫자만, 4자리로 만들도록 많이했거든요.
기존 회사방식)
<input id="input-only-number" class="input-box-design">
이렇게 html 한줄 필요하구요,
let inputDom = document.getElementById("input-only-number");
inputDom.addEventListener("keydown", function () {
//숫자가 아니면 입력행위를 실패하도록 만듬!
});
inputDom.addEventListener("input", function () {
//입력된값이 4자리가 넘어가면 앞 4자리만 잘라서 값에 반영시킴.
// 12345 --> 앞 1234잘라서 1234를 인풋박스에 반영시킴.
});
이렇게 javascript 코드가 필요해요.
그래서 숫자 / 자릿수 입력제한 인풋박스가 필요한 모든페이지에
저 코드가 중복되어 들어갔어요.
이걸 Vue에서는,
<input-only-number max-length="4" />
이렇게 단 한줄로 해결이 가능해요.
별도의 javascript 소스같은거 필요가 없어요.
누군가가, InputOnlyNumber라는 컴포넌트를 만들어둔게 있다면,
InputOnlyNumber라는 컴포넌트를 사용할 수 있도록 다운받고, 등록하기만하면,
<component-name property-name="value" > 이렇게 사용이 가능해요.
아니면 직접 만들어야죠.
위에서처럼, 별도의 이벤트 등록이나,
별도의 디자인이 필요한 css나, 이런거에 전혀 신경쓰지않아도 되요.
///
그래서 React는, UI 컴포넌트 라이브러리라고 하더라구요.
MVC 구조중에 V에 해당하는 문제를 해결하기위함 이래요.
기존 회사에서는 컴포넌트라는 단어 자체를 처음들어봤고,
남은 여백은 이 컴포넌트에 대해 작성해볼게요.
///
컴포넌트? ==> 독립적인 것이에요.
독립적이기 때문에 재사용할 수 있어요.
독립적이지 않으면 재사용하기 어려워요.
웹 페이지에는 똑같은 / 비슷한 UI가 많이있어요.
반복되는것은 코드를 중복시키지 않고,
컴포넌트로 만들어서 쉽게 완성할 수 있어요.
네이버에 초록색 흰색 버튼 사이즈별로 꽤 많죠?
기본적으로 웹페이지는 디자인부터가 통일성을 추구하기 때문에,
아마 여기저기 페이지 더 뒤지면 똑같이생긴 / 비슷하게생긴 버튼들 더 많이나올거에요.
그래서 이런것들도... 버튼 컴포넌트로 별도로 제작해서,
<button-component property-name="value" /> 이렇게 간단하게 만들 수 있고..
이런것도.. 구조가, 왼쪽에 사진, 오른쪽에는 제목 / 작가이름 / 별점수가 모두 통일되어있죠?
이런것도 누군가가 컴포넌트로 만들어주기만 하면..
<webtoon title="여신강림" author="야옹이" star="9.86" />
<webtoon title="마음의소리" author="조석" star="9.75" /> 이런식으로 간단하게 만들 수 있어요,
하지만 기존 회사에서는... 저런 반복되는거 모두..
<div class="webtoon">
<div class="image-wrap"><img src="여신강림이미지경로"></div>
<div class="
...이하생략
이런 html코드가 쭉 중복되어있었어요.
그래서 어떤페이지는 html 파일 하나가 천줄이 넘고.... 그랬어요.
기존에 java배울때는 중복되는 / 재사용가능한 코드는 메소드로 만들고 그랬지만,
UI를 이렇게 재사용할 수 있다는 패러다임(?)은 처음 느껴본 것 같아요.
>>> 재사용 가능한 UI
이게 가장 매력적이었습니다.
