[React] React.js 기초

1. React.js 기초

참고: React & Express 를 이용한 웹 어플리케이션 개발하기

 

 

• Redux(리덕스): 클라이언트 앱의 복잡성을 제어하기 위한 하나의 state제어 수단이다.

• Webpack: 자바스크립트 모듈과 관련 리소스들을 브라우저에서 이용할 수 있는 번들로 묶고 패킹하는 모듈 번들러

• Express.js: 노드 상에서 동작하는 웹 개발 프레임워크

• MongoDB: NoSql Database

• Mongoose: Node.js에서 MongoDB를 사용하기 쉽도록 하는 것

 

---

* react.js 프레임워크가 아닌 라이브러리!

• 프레임워크와 라이브러리의 차이

프레임워크

- 틀. 필요한 기능이 이미 만들어져 있는 것. 때문에 이 틀에서 벗어나기 어렵다.

- 단 한가지 프레임워크만 사용 가능하다. 다른 프레임워크나 라이브러리와 사용하는 경우 충돌하는 경우가 많이 발생한다.

- 아예 사용하지 않을 기능도 이미 구현되어 있기 때문에 무겁게 느껴질 수 있다는 단점이 존재한다.

 

라이브러리

- 필요할 때 가져다 쓰는 개념, 충돌을 최소화

- 리엑트는 유저 인터페이스를 만들기 위한 라이브러리다. (라우터, 컨트롤러 등을 내장하고 있지 않아서 가벼움)

 

---

 

• Angularjs, React 비교

앵귤러는 프레임워크이다. 따라서 뷰를 포함한다. 그러나 리액트는 뷰를 담당한다.

리액트 라이브러리의 핵심은 가상 돔(virtual DOM)을 사용한다는 것

(+) 리액트 네이티브: 모바일 네이티브 앱을 모바일로 만들 수 있도록 하는 것

 

---

 

• 가상 돔

추상화 시킨 것으로 자바 스크랩트 객체에 불과하다, DOM API를 사용하여 처리하는 것 보다 빠르다는 장점 존재

 

---

 

• 리액트의 장점

- virtual DOM을 사용한다.

- 배우기에 간단하다 =>  복잡함이 별로 없기 때문에

- 뛰어난 Garbage Collection 메모리 관리 성능

 

- 서버 사이드, 클라이언트 사이드 랜더링을 둘다 지원한다.

보통은 클라이언트 랜더링만 지원하는데 이 경우에는 초기 구동 딜레이가 존재하게 된다.

서버 랜더링을 제공하면 유저가 더 쾌적하게 이용할 수 있다. (서버사이드 랜더링 이후에 클라이언트 사이드 랜더링이 실행된다.) 

서버 랜더링은 검색 엔진 최적화를 할 수 있다.

- UI를 간편하게 사용, UI를 컴포넌트화 하여 효율적으로 재사용 할 수 있게 된다.

- 다른 라이브러리나 프레임워크와 혼용이 가능(Angularjs, JQuery 가능) - 이미 개발이 완료된 서비스에도 사용 가능하다는 것

 

---

 

• 리액트의 단점

- view only, 보여주는 부분만 관여하기 떄문에 데이터 모델링, Ajax, 라우터 등의 기능이 없다.

=> 빠진 부분은 다른 라이브러리 사용하여 구현해야 한다.

- 익스플로러 8이하 버전은 지원하지 않는다는 것!