얼마 전, Draggable UI를 적용하여 Todo list를 관리하는 아주 작은 웹앱을 만들었다. 그리고 멘붕을 겪었다. HTML의 DOM과 Javascript의 데이터를 함께 관리하자니 복잡도가 업청나게 올라가는 경험을 한 것이다. 그래서 React를 한 번 적용해봤다. Javascript로 바로 DOM을 그려버리는 것이 처음에는 좀 복잡해도 HTML과 DOM의 데이터를 sync하는 것 보다 간단했다. React를 좀 더 알아보자니, Angular, Vue 등 프레임워크가 몇 개 더 있는 것 같은데, 이들의 차이를 좀 더 자세히 공부해보자.
Angular, React, Vue는 무엇인가?
프론트엔드 프레임워크이다. 즉, 브라우저를 통해 보게되는 화면과 화면을 위한 비지니스 로직을 구성하는데에 사용한다.
프레임워 크라는 것이 그러하듯, 정해진 규칙에 맞춰 작성한 코드가 가성비 좋게(작성한 코드의 양에 비해 많은) 기능을 구현해낸다. 프론트엔드 프레임워크 뼈대는 무엇일까? 바로 Javascript다. 잘 생각해보면 Javascript일 수 밖에 없다. 브라우져가 담아낼 수 있는 3개의 언어 HTML, CSS, Javascript 중 다른 녀석에게 간섭을 할 수 있는 것이 Javascript뿐이다. 그렇다, 프론트엔드 프레임워크는 브라우져가 Javascript를 통해 화면을 ‘주도적’으로 그려나가도록 한다.
Angular, React, Vue는 브라우져가 Javascript를 통해 DOM을 그려내도록하는 프론트엔드 프레임워크다.
Angular, React, Vue는 왜 필요한가?
1) SPA를 만드는데 이만 한 게 없다.
- 브라우져가 직접 JS를 통해 랜더링 DOM을 만들어낸다. 따라서 ‘서버<->브라우져’ 간 불필요하게 반복하여 주고받는 데이터를 줄일 수 있다.
- 따라서 처음 페이지 구동에는 시간이 걸리지만 이후 동작은 더 빠르다.
- 처음엔 서버에서 페이지를 채워서보내고 2페이지부터는 ajax로 JQuery를 통해 페이지를 채우는 그런 비효율을 없앨 수 있다.
- (물론 처음부터 빈 페이지를 받고 ajax로 1페이지부터 채울 수 있지만….)
2) 상태 정보의 유지에 용이
- 프레임워크의 State를 통해 현재 선택된 검색 필터 종류, 키워드, 직전 키워드 등의 상태 정보를 저장하기에 용이하다.
3) component의 강력한 재사용성
- 동일한 (혹은 거의 동일한) 페이지 구성요소에 대해 component 단위로 재사용이 가능하며, 속성을 부여할 수 있다.