[React.js] Why React? .01

React를 제대로 시작하기 전에, React가 뭔지? 왜 Hot한지 이야기 해볼까 합니다. 

 

저물어가는 JQuery? 새롭게 등장하는 라이브러리와 프레임워크.😳

어릴적 잠깐 Web을 맛 보았을때, JQuery라는 라이브러리를 배웠고 JavaScript의 이해보단 짧고 간결하게 쓸 수 있는 JQuery 문법부터 배웠었죠. 복잡하고 길게 작성해야하는 JS보단 $으로 시작하여 짧게 작성하고 쉽게 DOM을 다루는 방식은 사람들을 매료 시켰고, 오랜기간 사랑을 받았죠. 그러나 최근 JQuery 사용을 지양하는 글이나 부정적인 단어가 보이고 있습니다.  그런 와중에 FaceBook에서 React라는 새로운 라이브러리를 개발해 발표했고 엄청난 붐을 일으켰습니다. 이외에도 구글에서 개발한 Angular, 오픈소스인 Vue 등이 있습니다.

 

왜 JQuery를 지양하자는 말이 나오는 걸까요?🤔

검색하고 찾아본 후 제 생각을 적자면 다양한 브라우저가 존재하고, JS 표준조차 제대로 정립되지 않았던 시절. 다양한 브라우저를 빠르고 쉽게 호환시킬수 있고 (크로스 브라우저) 쉽게 배울수 있던 JQuery는 그 시절 혁신적이였고 인기의 이유였다고 생각합니다. 그러나 현재는 다양한 브라우저 시대가 저물어가고 구글의 V8엔진이 대세가 되었죠. 여러가지 이유로 ECMAScript라는 JavaScript의 표준이 정립되기 시작합니다. 그리고 JS가 JQuery에 비해 리소스자원을 덜 필요로 하며 또한 처리속도 부분에서 더 빠르다는 이유와 함께 프론트 엔드 기술의 발전을 빠르게 발전시켰습니다. 물론 아직도 뜨거운 감자이긴 합니다만 최근 신규 프로젝트들은 React나 Vue, Angular 같은 Virtual DOM 이용한 자바스크립트 라이브러리나 프레임워크를 사용하는 추세입니다. 물론 React에 관해 비판적인 글도 꽤 많습니다. 하지만 대세는 쉽게 꺽이지 않는 것 같군요. 향후 새로운 대세로는 TypeScript나 Svelte가 될 수 있을지는 지켜보면 알게 되겠죠?

 

Virtual DOM?🤨

프론트엔드에서 가장 중요한 것은 DOM일 겁니다. DOM은 바로 우리가 보고 있는 웹 화면이죠.

우리가 작성한 HTML 문서를 렌더링하여 브라우저가 이해할 수 있는 트리 구조로 구성하게되고, 이것이 우리가 말하는 DOM입니다.

출처 : https://ko.wikipedia.org/wiki/문서_객체_모델

기존의 DOM방식은 조금이라도 변화가 생긴다면 처음부터 새롭게 렌더링 하게되는 방식이었고, 이는 Virtual DOM이 탄생하는 계기가 되었습니다. React가 등장하고 인기몰이 하게된 가장 큰 이유 중 하나가 바로 Virtual DOM이라는 개념을 대중화 했기 때문일겁니다.

Virtual DOM의 작동방식은 간단하게 말하자면 메모리에 복제된 DOM(Virtual DOM)이 있고 변경사항이 생긴다면 해당 Virtual DOM에 먼저 반영한 뒤 현재 렌더링 되어 있는 DOM과 비교하여 변경점만 최소한으로 렌더링 해주는 방식입니다.

 

왜 React를 선택했나요?🧐

국비교육을 통해 자바&스프링 프레임 워크를 배우고 어떤 개발자를 하고 싶은지 고민했습니다. 처음 국비교육시절엔 웹개발은 절대 안하겠다라고 생각했었는데, 무언갈 서비스를 하고 남에게 잘 보여줄 수 있는 방법을 고민했었는데 가장 좋은 방법은 웹이였습니다. 그리고 웹은 꾸준히 발전해 나갈 것이며 미래엔 더욱 다양한 일을 웹으로 처리할 것이라 생각했죠. 그리고 웹에 대해 공부를 시작하게 되었고 제일 접하기 쉬웠던 (자료가 가장 많았던) React를 선택하게 되었습니다. 3대장이라고 불리는 React, Angular, Vue 중에 가장 많이 사용되고 따라서 자료가 많아 입문이 쉬웠다고 생각합니다. 물론 입문은 쉬웠지만 익히는건 다른 이야기였습니다. 쉬웠다면 이 글을 쓰지도 않았겠죠?

 

P.S 이 글을 연재하게된 계기?😃

React를 공부하면서 좀 어려움이 많았던거 같았습니다. 처음 React를 접할때 클래스형으로 봤었는데, 공식 홈페이지에서 공부하고자하니 함수형과 Hook을 접했습니다. 그리고 Hook을 공부할땐 이해가 안돼서 머리를 싸매기도 했었죠. 그런 처음 접할때 이해하기 힘들었던 부분은 저의 경험을 녹여 글에 담고자 합니다. 물론 자바스크립트 기초가 부족해서 나온 경우도 있긴합니다. ES6문법을 제대로 몰랐을때 말이죠..하하. 그런 부분도 조금씩 곁들일 생각입니다.