[ReactJS] React.JS를 배워보자

React.JS

: Facebook에서  UI를 구현하기 위하여 만든 JavaScript Library

우리가 사용할 Skill

- ES6 : 2015년에 업데이트된 공식 JavaScript 문법

- Redux : 애플리케이션의 상태를 관리하는 라이브러리

- Webpack : 각종 모듈 및 플러그인을 통해 프로젝트를 build하는 작업을 도와주는 모듈번들러

- Express : Node.JS 환경에서 웹서버 여는 것을 도와주는 프레임워크

- MongoDB : SQL DataBase Management System

- mongoos : NodeJS 웹서버에서 MongoDB를 간편하게 사용할 수 있게 해주는 프레임워크

앞으로 만들어 볼 프로젝트

1. 전화번호부

- 서버와 통신하지 않고 로컬스토리지를 사용하는 전화번호부

2. 카운터 (Redux)

- 플럭스 아키텍처의 구현체인 Redux를 구현해보면서 만들 예제

3. 무한 스크롤형 메모패드

- 한 번에 모든 데이터를 다 불러오는 것이 아니라, 아래로 스크롤할 수록 다음 데이터를 계속해서 불러오는 형태의 메모패드

프레임워크 vs 라이브러리

1. 프레임워크

- 필요한 기능이 이미 대부분 만들어져 있고, 틀(frame) 안에 우리가 내용을 채워 넣어 완성시키는 것

- 틀을 벗어나기 힘든 것이 단점

- 보통 단 한 가지의 프레임워크를 사용함

- 가끔 다른 프레임워크나 라이브러리와 함께 이용할 때, 충돌하는 경우도 있어서 따로 고쳐줘야 함

- 우리가 아예 사용하지 않을 기능도 구현되어 있기 때문에 상황에 따라서 조금 무겁게 느껴지기도 함

2. 라이브러리

- 필요한 부분에만 가져다 쓰면 되는 개념

- 다른 라이브러리와 충돌할 일이 없음

ReactJS는 프레임워크가 아닌 라이브러리

ReactJS는 user interface를 만들기 위한 라이브러리다.

ReactJS가 AngularJS를 대체할 수 있을까?

NO!!! Angular는 프레임워크다.

ReactJS와 AngularJS는 완전히 다른 것이기 때문에 사과와 오렌지를 비교하는 것과 같은 느낌.

(참고. react-native : 모바일 네이티브 앱을 리액트로 만들 수 있게 해주는 프레임워크)

ReactJS의 장점

- Virtual DOM을 사용

- 배우기 간단함

- 컴포넌트 단 하나만을 사용함

- 뛰어난 garbage collection, 메모리관리, 성능

- 서버 렌더링 & 클라이언트 렌더링 둘 다 지원

- 매우 간편한 UI 수정 및 재사용 (UI를 컴포넌트화 하여 재사용함)

- 페이스북이 밀어줌

- 다른 프레임워크나 라이브러리와 혼용 가능

ReactJS의 단점

- VIEW ONLY : 리엑트는 보여지는 부분만 관리함

- 자바스크립트 배경지식이 부족하면 처음에 구현하는 것이 조금 힘들 수 있음

- IE8 이하 버전은 지원 안함