강의 소개
리액트 기초에 해당하는 지식을 배우게 될 것.
- 튜토리얼 문서
- https://velopert.com/3613
프론트엔드 라이브러리란 무엇인가?
프론트엔드 라이브러리
HTML, CSS = 정적 페이지를 제작 가능
HTML, CSS + JavaScript = 동적 페이지 제작 가능
요즘에는 브라우저 상으로도 자연스러운 흐름으로 많은 것을 할 수 있고, 이를 위해서는 수많은 상태를 관리해줘야 한다.
많은 DOM요소들을 관리하고, 상태값 업데이트 관리를 최소한으로 하고, 사용자 인터페이스 구현 개발에 집중할 수 있도록 해주는 것이 프레임워크, 라이브러리를 사용하는 이유이다.
Angular
- 다양한 기능들(http클라이언트, 라우트, 다국어 지원 등)이 내장되어있어 앵귤러만으로도 많은 것을 제작할 수 있다.
- 공식 라이브러리가 있다.
- 타입스크립트 사용이 기본이다.
- 프레임워크 차원에서는 매우 성숙하지만 새로운 버전은 인지도 측면에서는 아직 성장하는 단계라고 할 수 있다.
React
- 컴포넌트 개념에 집중되어있는 라이브러리(프레임워크가 아니다)
- 데이터를 넣으면 우리가 지정한 인터페이스를 조립해서 보여준다.
- 페이스북 개발자들이 라이브러리의 성능과 개발자 경험을 개선하기위해 연구하고 있다.
- 앵귤러와 달리 사용자에게 전달되는 뷰만 신경쓰고 나머지 기능은 써드파티 라이브러리를 사용한다. (리덕스, 리액트 라우터....)
- 공식 라이브러리 개념은 없다. 한 가지 문제를 해결하기 위해 여러 가지 솔루션이 있다.
Vue
- 입문자가 사용하기에 쉽다.
- 웹팩같은 모듈 번들러가 없이 CDN으로 불러와서 사용할 수 있다.(HTML에서 script태그로 불러온다는 의미)
- HTML을 템플릿처럼 그대로 사용할 수 있어 마크업디자이너, 퍼블리셔가 있을 경우 작업 흐름이 매끄럽다.
- 공식 라우터, 공식 상태관리 라이브러리가 존재한다.(리액트와 다른 점)
- 앵귤러처럼 디렉티브라는 기능이 있다.
- 리액트처럼 버츄얼 돔 기반 컴포넌트가 있다.
- JSX를 리액트에서와 마찬가지로 사용할 수 있다.
리액트의 Virtual DOM
"우리는 지속해서 데이터가 변화하는 대규모 애플리케이션을 구축하기 위해 리액트를 만들었습니다."
-React-
페이스북이 리액트를 만들기 전에도 앵귤러, 백본 등의 수많은 프레임워크들이 존재했다.
해당 프레임워크들은 데이터단을 담당하는 Model, 화면을 보여주는 View, 사용자가 발생시키게 되는 이벤트를 관리하는 Controller로 이루어진 MVC패턴, MVC패턴으로부터 파생된 MVVM, MVW 등의 패턴들로 이루어져있다.
여기서 공통점은 Model이다. 양방향 바인딩을 통해서 Model의 값이 변하면 View에서도 변화시켜주고, View에서 값이 변하면 Model에서도 변화시켜준다.
변화(Mutation)는 상당히 복잡한 작업이다. 특정 이벤트 발생 시 Model에 변화를 일으키고, 이 변화를 일으킴에 따라 어떤 DOM을 가져와서 어떤 방식으로 View를 변화시켜줄지 로직이 필요하다.
페이스북에서는 위 과정에대해 이런 생각을 했다. "변화가 일어나면 Mutation을 하지 말고, 기존에 있던 View를 날려버리고 새로 만들어버리면 어떨까?"라는 생각을 시작으로 리액트 개발이 시작된 것이다.
하지만, 새로운 View를 만든다는 것은 성능적으로 엄청난 문제를 야기한다. 그래서 존재하는 것이 Virtual DOM(가상의 돔)이다.
가상의 돔에 한 번 렌더링을 하고 기존의 돔과 비교 후에 변화된 곳만 업데이트를 하는 것이다.
React and VirtualDOM
영상 참고-React 와 Virtual DOM 의 이야기
- 데이터가 변경될 때마다 Model이 뷰를 제공한다.
특별하게 만드는 점
리액트에서만 Virtual DOM을 쓰는건가?
리액트는 Virtual DOM을 성공적으로 사용한 선발주자이다. 리액트외에도 Vue, Marko, Maquette, Mithril 등이 있다.
리액트만 특별하게 만드는 점?
어마어마한 생태계가 리액트를 특별하게 만드는 점 중 하나이다.
또한, 사용하는 곳이 많다. Airbnb, BBC, Cloudflare, Codecademy, Coursera, Dailymotion, eBay, Twitch, Walmert, Yahoo, FACEBOOK 등..
