Download to read offline
![[141] react everywhere](https://cdn.slidesharecdn.com/ss_thumbnails/141react-everywhere-150914022631-lva1-app6891-thumbnail.jpg?width=640&height=640&fit=bounds)
React
- 1.
- 2.
- 3. #React전에 jQuery, Backbone, AngularJS가있었다. 출 처 : H T T P S : / / M E D I U M . C O M / @ R I A N C O M M U N I T Y / R E A C T % E C % 9 D % 9 8 - % E D % 8 3 % 8 4 % E C % 8 3 % 9 D % E B % B 0 % B 0 % E A % B 2 % B D % E A % B 3 % B C - % E D % 8 A % B 9 % E C % A 7 % 9 5 - 4 1 9 0 D 4 7 A 2 8 F
- 6. #10년은 가지고 놀만한아이디어, React의 등장
- 7.
- 9.
- 11.
- 13. JSX Declarative한 개발을 도와주는도구 Declarative? 선언적? Vs Imperative? 책무?
- 14.
- 15.
- 16. #Vitual DOM = DOM에대한 완전히 새로운 접근
- 18. Virtual DOM은 단순한 DOM조작 도구가 아니라 컴포넌트 단위로 움직이는 Declarative한 개발을 구현하기 위해 도입된 것
- 20.
Editor's Notes
- #5 2006년 John Resig가 Jquery를 발표한 이후, 이 대단한 아이디어는 순식간에 웹을 사로잡았습니다. Jquery가 DOM을 다루는 방식은 지금까지도 가장 쉽고 효율적인 방식으로 인정받고 있으며, 오랜 세월동안 사실상의 표준으로써 군림해왔습니다. DOM 제거에 대한 이야기. 장점과 단점
- #6 그러다가 Backbone과 AngularJS를 위시한 SPA(Single Page Application)이 보다 구조화된 프론트엔드 환경을 제시하기 시작합니다. 그러나 역시 Jquery가 몰락한 것은 아니어서, Backbone과 AngularJS는 역시 DOM을 다루는 중요한 방법으로써 Jquery를 사용했습니다. 지금은 보기만 해도 골치가 아파오는 Backbone이지만 그 발자국은 거대했습니다 프론트엔드 프레임워크의 대명사였던 Angular
- #7 이 상황에 완벽하게 균열을 내면서 등장한 것이 React입니다. React는 Google을 제외하면 어떤 의미에서는 현재 최강의 웹이라고 할 수 있는 Facebook이 만든 Javascript 라이브러리입니다. React는 단숨에 수많은 개발자들을 사로잡았습니다. Facebook을 비롯하여 Airbnb, Netflix, Dropbox, Twitter, Evernote, Uber 등 세계를 선도하는 서비스들이 React를 사용합니다. 그중에서도 Airbnb와 Netflix는 페이스북 못지않게 React를 생태계에 적극적으로 기여하고 있습니다. React는 Angular같은 Framework가 아니라 Library입니다. Router처럼 웹을 만드는데 꼭 필요한 도구들이 기본적으로 포함되어있지 않습니다. 그 대신 가볍습니다. 무엇보다 훨씬 빠르게 배울 수 있습니다. 더불어 개발자들의 창의성을 자극하는 매력이 있습니다.
- #10 Component는 UI를 구성하는 개별적인 뷰 단위입니다. React로 개발을 한다는 것은 마치 블럭을 조립해 성을 만드는 것과 같습니다. 전체 앱은 각 Component들이 결합해서 만들어 지게 되죠. Jquery로 프로그래밍할때의 상상
- #11 무엇보다 각 Component들은 앱의 다른 부분, 또는 다른 앱에서 쉽게 재사용이 가능합니다. Redux의 창시자이며, 현재는 Facebook React Core팀의 일원인 Dan Abramov는 React의 목표가 성능보다는 유지가능한 앱을 만드는 것에 있다고 설명한적이 있습니다.
- #12 JSX는 React를 위해 태어난 새로운 자바스크립트 문법으로, 과거 페이스북이 만들었던 PHP의 개량판 XHP에 그 기원을 두고 있습니다. (참조)React.js Conf 2015 Keynote
- #13 뭔가 html처럼 보이긴 하는데 스트링으로 감싸진 것도 아닌 정체불명의 녀석들입니다. React는 작성한 코드를 컴파일하는 과정을 꼭 거쳐야 합니다. 대부분 사실상 자바스크립트 표준이 되어가고 있는 Babel을 사용하죠. Babel의 React 플러그인을 통해 위의 코드를 컴파일하면 다음과 같은 모습이 됩니다. React는 Babel과 같은 트랜스파일러를 꼭 써야하기 때문에 Webpack 등을 통한 꽤 까다로운 초기 세팅이 필수적
- #14 간단하게 말해 한눈에 이해하기 쉬운 개발을 만들어 줍니다. JSX는 그 형태가 마치 html과 같습니다. 유저에게 보여주고 싶은 최종적인 View라고 할 수 있죠. 개발자는 JSX를 통해 결과물에 직관적으로 도달할 수 있습니다.
- #17 결국 위의 모든 것을 가능하게 만들어주는 것, 그리고 React의 가장 큰 특징이자 뜨거운 논쟁을 불러일으키는 대상, 그것이 바로 Virtual DOM입니다. DOM은 웹 개발자들의 영원한 숙제입니다. DOM은 웹의 핵심으로써, 브라우저가 화면을 그리기 위한 정보가 담겨있는 문서입니다. 웹은 원래 인터넷을 통해 공유되는 문서의 규격으로써 탄생했죠. 문제는 이 DOM을 효과적으로 다루는 것이 꽤나 힘들다는 것입니다. 그래서 DOM이 성능이 좋지 않다느니 하는 말도 나오지만 사실 DOM 자체보다는 해석 과정에 문제가 있는 경우가 대부분입니다. 브라우저별로 이 DOM을 가지고 화면을 만드는 방식이 다르기도 하구요. Jquery는 누구나 쉽게 DOM을 조작할 수 있도록 하는 아주 멋진 도구였습니다. 그러나 Jquery는 뭔가 구조적 대안이라기 보다는 날카로운 커터칼에 가까운 것이었죠. 앱 전체에 무분별하게 Jquery가 난무하고 있는 코드를 본 적 있으신가요? Javascript로 간단한 계산도 못해도 Jquery는 쓴다느니, 남이 쓴 Jquery를 그냥 갖다 붙이면 된다느니 하는 말이 나오는 것이 바로 Jquery의 장점과 단점을 모두 보여준다고 할 수 있습니다. Jquery가 인기있었던 이유가 바로 이 커터칼처럼 DOM을 잘라내는 방식에 있었지만, 프론트엔드 개발의 전문성이 높아지고 대형 앱의 유지/보수가 화두가 되면서 이것이 Jquery의 한계로써 드러나게 되었죠.