Frudy
6k
2019-12-22 12:00:25 작성 2019-12-22 12:02:32 수정됨
28
8515

제가 Vue, React를 사용하는 이유.


본문의 글은 [ 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


이게 가장 매력적이었습니다.

12
7
  • 댓글 28

  • meaway
    366
    2019-12-22 12:20:05

    데이터와 화면 일치 시켜주는게 진짜 번거로운데

    알아서 해주니 짱 좋죠 ㅎㅎ

  • Frudy
    6k
    2019-12-22 12:23:37

    흑흑 얼마나 기술력이 뒤쳐져있었으면 이런 환상적인 기술을...이제알았는지..

    흑흑..진작에 알았으면......


    음 아니네요. Vue React라는 단어는 좀 일찍들어보긴했는데

    한번 찾아보려는 노오력을 했다면 좀더 좋았을거같아요.

  • 냐우룽
    163
    2019-12-22 12:50:16 작성 2019-12-22 13:04:45 수정됨

    js쪽이라 하더라도 공통 js파일에 정의해두면 말씀하신 부분에 대해 똑같이 사용할 수 있지 않나요?


    예를들어 공통 js 하나 두고 class에 input-only-number에 대한 리스너 넣어두면(event) 다른 파일에

    함수 정의할것없이 그냥 class명만 쓰면 숫자만 들어가도록 적용되구요.

    길이 제한도 class명 넣으면서 뭐 마찬가지로 max-length attribute를 넣도록 한다면 (없다면 제한없고)

    위의 리스너에서 해당 attribute 받아 쓰면 될거같구요.


    저런 반복되는 부분들도 마찬가지로

    예를들어서 var getWebtoonInfoHtml : function(data) { return  <div class="webtoon"><div class="image-wrap"><img src=data.경로></div>... ; }

    혹은 바로 적용한다면

    ...

       var tmp = <div class="webtoon"><div class="image-wrap"><img src=data.경로></div>;

       $("[name=" + data.target +"]").html(tmp);

    ...

    이렇게 해도 될것같구요.

    이런식으로 정의해두고 쓰면 되는부분 같습니다.

    class로 두고 사용하면 컴포넌트형태로 재사용도 역시 가능하구요.


    반년차 늅늅이긴하지만 자바쪽을 갠프로 나름 오래써서 그런지 몰라도 전 이렇게 사용하는게 당연하다고 생각하고 현재 작업할때도 위와같이 쓰고있는데 이부분을 뷰쪽에서는 js와 다르게 처리해줘서 좋다고 하는부분이 잘 이해가 안되서요.

    아직 늅늅이다보니 js, jquery 정도밖에 안써봐서요. 뷰나 리액트도 한번 써볼까 싶었는데 아직 뭐가 다른진 안찾아봤었거든요.

    결국 일반적으로 js를 사용하는 형태가 글에 적으신 형태이고, 위에 적은것과 같이 객체지향적으로 js를 쓰면 위에 적으신 글의 뷰나 리액트랑 비슷하게 사용할수있는게 아닌가 싶어서 댓글 달아봅니다.


    아, 변수값을 바꾸면 화면이 알아서 바뀐다 부분은 뭐 구조적으로 변수에 대한 변경을 바로 적용은 못시키겠으나, (역시 잘 모르지만 js가 싱글스레드로 알고있으니, 옵저버 스레드 두는건 힘들것같아서요)

    setParam(~); 형태로 역시 함수로 하면 될꺼같구요!


    js 부심같은건 아니고 그냥 현재까지 써본게 js랑 jqeury 뿐이라.. ㅋㅋ

    그냥 적으신 부분만 보자면 동일하게 적용가능하지 않을까 싶어서요.

    혹시 기분 나쁘시면 죄송합니다. 원래 궁금한거 있으면 이런식으로 의견나누는걸 좋아합니다. +_+

  • shaffron
    4k
    2019-12-22 13:05:49 작성 2019-12-22 13:06:49 수정됨

    프론트엔드 프레임워크(혹은 라이브러리)를 쓰는 가장 큰 이유는 직접 DOM을 조작하지 않는다는 것이죠


    변수가 변경되면 자동으로 화면에 반영시켜준다거나, 컴포넌트를 만드는 것 등은 기존에도 가능했죠.

    단 내가 직접 이벤트 리스너를 구현하고, 리스너에서 jquery로 DOM을 조작하는 코드를 구현해야 했던 것이죠.


    View와 Model간의 관계만 지정해주면 데이터의 변화에 따른 DOM의 변화는 프레임워크가 담당한다.

    이게 주요 골자이며 추가적인 특징들이 재사용가능한 컴포넌트 등등이 있겠죠.

  • 냐우룽
    163
    2019-12-22 13:07:16 작성 2019-12-22 13:08:16 수정됨

    아하 그러니까 c++에서 자료구조를 짜기 위해

    직접 구현하는것 (기존 js, jquery)과

    아무래도 라이브러리가 신뢰성 높고 시간복잡도도 최적화 되어있다고 보장되어있을테니

    STL 써서 걍 바로 쓰는것 정도의 차이가 될까요?


  • Gear
    371
    2019-12-22 13:07:58

    @냐우룽


    js가 언어이고, jQuery와 리액트는 js의 라이브러리, 뷰는 js의 프레임워크입니다.

    따라서 jQuery, React, Vue 중에 하나라도 쓴다는건 자바스크립트를 쓰고 있는 것이기도 합니다.

    jQuery, React, Vue는 말씀하신 그런 부분들을 미리 구현해놔서, 이용하기만 하면 편하게 쓸 수 있는게 장점인 것이죠.

    그것들을 이용 안 한다면 그냥 본인이 직접 정의해줘야 할 뿐입니다.

  • Gear
    371
    2019-12-22 13:09:41

    답글 다는 사이에 다른분이 답변해주셨고, 이해 하신거 같네요.

    맞습니다. 직접 짜느냐, 남이 짜놓은걸 갖다 쓰느냐의 차이죠.

  • Frudy
    6k
    2019-12-22 13:12:35

    shaffron

    아 맞아요. 그 이유를 까먹고있었어요.

    돔을 직접 조작하지않는다는것도 정말좋은 장점중에 하나에요.


    id나 class명으로 직접 돔에 접근하는 제 코드들을 보면

    아무리생각해도 전역변수 선언해서 거기에 접근하는거같았어요.


    id와 클래스명은 어디서도 접근할 수 있다보니..

    제 코드를 제가 짜면서도 무서웠거든요.


    어디서도 접근하지 못하도록 나온 개념이 Java에서는

    Modifier Access라는 참 좋은게 있는데.... 하면서

    dom을 아무데서나 접근하지못하도록 만드려면 어떻게 해야할까 고민하다가 포기했었어요,

  • 냐우룽
    163
    2019-12-22 13:12:53

    shaffron 

    Gear


    상세히 설명해주셔서 감사합니다!

    저도 한번 써봐야겠네요. 재밌을 것 같아요.


  • 냐우룽
    163
    2019-12-22 13:15:00 작성 2019-12-22 13:16:40 수정됨

    Frudy

    혹시 뷰나 리액트쪽엔 타입명이 있나요?

    js나 jquery 쓰면서 제일 싫은게 타입이 없다는 부분이었거든요.


    --


    댓글달고 찾아보니 여기도 없나보군요 ㅠ 타입스크립트가 타입명이 있는건가보군요 흠..

    하긴 뭐 늅늅이라 그냥 위에서 환경 잡아둔거 쓰라는대로 써야겠죠 전.. ㅋㅋㅋ

  • Frudy
    6k
    2019-12-22 13:15:41

    냐우룽

    맞아요, Vue자체가 javascript 프레임워크에요,

    말씀하신대로 작성을 하는것을 Vue가 도와준다는 느낌이 강해요.


    하지만 Javascript로 그런 시도를 하려는 이런 

    컴포넌트 패러다임 자체를 저는 기존회사에서 느껴보지를못했어요.


    제가 다시 그 회사가서 Vue React를 못쓴다면,

    정말 작성자님처럼 Javascript로 컴포넌트 구현할거에요.


    하지만, Vue는 문법적으로 그걸 도와줘요.

    React는 JSX가 문법적으로 그걸 도와줘요.


    html = '';

    html += '<tag></tag> 이렇게 해서 set하는 코드보다는,


    <custom-tag></custom-tag> 이렇게 보이는게

    훨씬 읽기쉬운 코드거든요.


    그래서 DX가 정말 좋은거같아요 Vue랑 React는.

    앵귤러는 못해봐서 모릅니당

  • Frudy
    6k
    2019-12-22 13:16:10 작성 2019-12-22 13:17:23 수정됨

    냐우룽

    아마 없는것으로 알고있습니다.

    그래서 Typescript랑 같이쓰는거라고 알고있어요.


    Javascript Class에는 ModiferAccess 있는지는 모르겠지만..

    Typescript Class에는 ModifierAccess도 있고..

    Java의 final같은 느낌을 하는 readonly키워드도 있고...

    말씀하신 int타입같이 생긴 number타입 도 있고..

    interface도 있고..

    abstract class도 있고..


    Java에있는거 많이 있어여.


  • 냐우룽
    163
    2019-12-22 13:18:49

    Frudy 

    자세히 설명해주셔서 감사합니다!

    갠프로는 뷰,리액트에 타입스크립트 붙여서 함 해봐야겠네요.

    그럼 훨씬 안정적으로 짤 수 있을것같아요.

  • Gear
    371
    2019-12-22 13:25:00 작성 2019-12-22 13:40:56 수정됨

    Vue의 컴포넌트에서 props에 타입 관련된 기능이 있는줄로 압니다.

    https://vuejs.org/v2/guide/components-props.html#Prop-Types

    아마 내부적으로 typeof나 instanceof같은걸 이용하지 않았을까 싶네요.


    하지만 이렇게 props같은 부분에서만 제한적으로 쓰이기도 하고, 언어 자체적으로 타입체크를 하지 않기 때문에, Frudy님이나 냐우룽님이 생각하신것처럼 타입을 체크하고싶다면 타입스크립트를 쓰는게 더 좋은 방법이겠지요.


    P.S.

    'js나 jQuery'라는 표현은 지양해주셨으면 좋겠습니다.

    왜냐하면 그렇게 표현하면 잘 모르는 사람이 볼 때 마치 두 개 모두 언어이거나 라이브러리라고 오해하기 쉽지 않을까 싶기 때문입니다.

    그런 표현이 커뮤니티에서 자주 보이는 덕분에 제가 처음 아무것도 몰랐을때 'js와 jQuery 중에 뭘 배워야 하나' 하는 고민을 하게 했었습니다. 그래서 좀 오래 검색해봤던걸로 기억합니다.

    당연히 자바스크립트가 기본이 되는건데 말이죠.

  • 냐우룽
    163
    2019-12-22 13:49:41 작성 2019-12-22 13:51:15 수정됨

    Gear

    아.. 아직 제가 개념이 잘 없어서 두개를 따로보고있긴합니다 ㅋㅋㅋㅋㅋ

    라이브러리라곤 하지만 추가기능이라기 보다는 기존 js도 동일한 기능이 있는데 그걸 랩핑해서

    더 편하게 쓰고있다보니 (물론 추가기능도 있겠죠?)

    라이브러리 같은 느낌이 아니고 그냥 따로 쓰는 느낌이네요..

    실은 약간 c++에서 STL 안쓰다 쓰는 느낌보다는 c쓰다 c++ 쓰는 느낌입니다.

    오해하기 쉽다기보단 제가 오해하고 있는듯하네요 애초에.. ㅠ

    아직 이해가 깊지 않아 그런듯합니다. 앞으론 주의하겠습니다.


  • Gear
    371
    2019-12-22 13:56:17

    @냐우룽


    그렇군요~ 래핑된 기능들이 많다보니 오해하기 쉬운 것 같습니다.

    제가 아무것도 모를때, 그래서도 쉽게 오해했었을겁니다.

  • 파이썬초보..
    653
    2019-12-22 16:39:24

    JS 도 패턴 잘 구현하면 똑같이 되는거 아닌가요??

    굳이 라이브러리의 장점이 아닌거 같은데.......

  • Frudy
    6k
    2019-12-22 17:14:53 작성 2019-12-22 17:15:08 수정됨

    패턴 잘 구현해서 쓰기쉽게 만들어놓은게 프레임워크라고 생각해요.

    저는 Vue React를 직접 잘 구현할 자신이 없습니다.

  • moonti
    3k
    2019-12-22 18:50:38

    직접 할수있죠. 

    해보시면 내껀 왜케 느리지 할꺼에요. ㅎㅎ

  • 고뿌
    2k
    2019-12-22 20:28:42

    컴포넌트... 예전부터 그것을 하고싶다는 '욕망'은 분명 있었지만,

    현업에서는 이미 엎질러진 레거시와,

    그 레거시에 익숙해진 동료의 멱살을 끌고 가는것도 힘들죠.

    솔직히, 혼자 잘난척하며 그런 코드 짯다가 잘못되면 그런 상황도 감당하기 어렵고요...


    그런점에서, vue, react 같은 녀석들은

    그 멱살을 나대신 끌어주고,

    원래 내가 짰어야 할 (예컨대, data를 변경하면 저절로 화면도 바꿔주는 코드) 것들을 짜줬다는 점에서

    참 좋은 녀석들이지요.

  • NPE
    917
    2019-12-23 00:41:21

    구조적으로 컴포넌트별로 js,html,css가 완벽히 분리되는 것을 원하시면 angular도 좋습니다.

  • B급 개발자
    804
    2019-12-24 09:37:12 작성 2019-12-24 09:37:36 수정됨

    MVVM 패턴도 같이 알아두시면 좋지 않을까요?

  • Frudy
    6k
    2019-12-24 12:18:27

    MVVM패턴 감사합니다. 찾아볼게요.

  • 한량개발자
    1k
    2019-12-24 12:28:39

    vue / react / angular 전부 기존 프로그래밍 방식이랑 다른게,

    선언적 프로그래밍이기 때문에.. 진짜 편하지요.. 내가 선언만 해주면 내부에서 알아서 바인딩하고 변화 감지해주고.. 얼마나 편합니까 ㅠㅠ


    그리고 컴포넌트 동의합니다. 재사용 가능한 UI를 쉽게 만들수 있다는것도 큰 매력이고..

    진짜 JSP 프로젝트랑 비교해도 SPA를 가져가면, 코드량이 확 달라집니다 ㅠㅠ

  • age3442
    332
    2019-12-24 18:33:37

    양방향 바인딩과 cli툴을 사용하는게 정말 최고지요

    거기다 서버단과 프론트단 완벽하게 분리 개발이 됩니다.

    도입을 고민 하시는 분들은 초초초 강추 드립니다.


  • Yuu2
    2019-12-25 12:54:34

    리액트 조금해봤었는데 라이프사이클 관리하는게 너무 어렵더라고요...

    deprecated됐다고 들었는데 요새는 어떤지 모르겠네요.

  • 토토땅
    187
    2019-12-25 19:56:22

    동적인 화면이 많으면 좋고 정적인 화면이 많으면 오버스펙이라고 봐야하는데 요즘은 식당 홈페이지 같은 게 아닌 이상 동적인 화면이 많으니 좋은 것 같습니다.

  • 매실
    1k
    2019-12-27 10:46:12

    리액트 빌드해서 써야 하는게 참 불편함

  • 로그인을 하시면 댓글을 등록할 수 있습니다.