[1/4 스터디] 뷰나 리엑트를 왜 쓸까?

주제: 뷰나 리엑트를 왜 쓸까?

뷰를 왜쓰는지 알아보기전에, 뷰 이전의 방식을 복습해보겠습니다.

크롬, 사파리, 인터넷익스플로러 같은 브라우저들은 웹표준을 지키며 만들어졌는데요.
브라우저는 HTML, CSS, JavaScript를 사용해서 만들어진 문서를 읽어줍니다.
그래서 우리가 만든 html 문서는 브라우저에서 실행되며, 웹표준 규격에 의해 DOM 객체가 생성됩니다.
이 DOM 객체는 웹 표준에 정의된 문서를 조작할 수 있는 API들이 포함되어 있습니다.

그래서 우리가 브라우저가 만들어주는 document와 같은 객체를 통해 document.getElementByID()같은 api를 사용해서 돔을 조작할 수 있는 것이죠.
이제 우리는 브라우저에서 제공하는 api를 통해 문서를 조작할 수 있습니다.
그래서 그렇게 코딩을 해왔어요.
그런데 페이스북의 개발자들은 불편함을 느꼈습니다.

<div id="apple"> 이라고 html문서에서 div 엘리먼트를 만들고,
javascript에서 document.getElementById("apple")로 콕 찝어서 썼는데,
이 두개의 코드가 물리적으로 멀리 떨어져있으니까, 개발을 하면 할수록 찾기도 힘들고 개발이 힘들어요.

그래서 이 <div id="apple">태그랑 이 apple 엘리먼트가 하는 일을 묶어두고 싶어서, 
apple.vue라고 만들고 apple 엘리먼트가 하는 일을 vue에서 정한 문법으로 정의해 주면, 
가상돔이 html, javscript로 알아서 구현해줄게, 모아놓고 편하게 코딩해.합니다. 
그리고 apple.vue를 컴포넌트(부품)이라고 하죠.

이걸 소프트웨어 에서 "결합도를 낮추고 응집도를 높힌다" 라고 하는데요.
관련있는 코드끼리 모아서 응집도를 높이고, 이 코드를 수정해도 다른쪽은 영향을 안받게 합니다.

결론으로, 관련있는 코드끼리 모아서 개발을 쉽게하고, 가상돔에서 제공하는 API를 사용하면 반응형과같은 화면 조작도 쉽게 할 수 있으니까 사용하게 됩니다.