[React] 리액트란? 사용하는 이유 Why React?

Web-app (웹 앱)

• 앱과 같은 사용성을 제공하는 웹.
• 높은 수준의 UX제공
  • 화면의 새로 고침없이 부드럽게 전환을 해주는 장점 (SNS 사이트에 주로 사용)
• 모바일 App으로 발행이 쉬움 

요즘은 Web page(웹 페이지)라는 말보다 Web Application(웹 애플리케이션)이라는 말을 더 많이 사용한다. 

 

...

 

애플리케이션의 규모가 커지지면서 다양한 기능을 구현이 요구되었고, 이전의 방법(DOM, jQuery 등)들로 개발+유지보수를 하는 것이 어려워졌다.

화면의 모든 DOM 요소들에 직접 접근해서 조작하고 관리하기란 쉽지 않다. (jQuery도 결국엔 쉽게 DOM에 접근해서 조작을 가능하게 하는 메소드의 모음)

 

시장에서 요구되는 웹 서비스의 규모가 커짐에 따라 복잡한 애플리케이션을 개발하며 생산성을 향상+많은 양의 데이터 관리+코드 유지 보수를 더욱 편리하게 하기 위해 다양한 Frontend Framework(Library)가 등장하게 된다. 그 중 가장 많이 쓰이는 세 가지가 Angular, Vue, React 이다.

 

✅ Frontend Framework & Library

• Angular : Google에서 개발한 Framework. TypeScript 기반으로 매우 안정적이고 탄탄한 Frontend App 개발이 가능. 무겁고 배우기 어렵다는 단점이 있다. (MVC Architecture, Model-View-Control)
• React : Facebook에서 개발한 Library. “지속적으로 데이터가 변화하는 대규모 애플리케이션 구축하는 것” 을 목표로 한다.
  리액트는 오로지 View만 담당한다. 그만큼 내장되어 있는 기능이 부족해 third-party 라이브러리(ex. React-router, Redux)를 함께 사용한다. 
  페이스북의 지속적인 관리와 함께 생태계가 활성화 되어 있으며 가장 큰 커뮤니티를 가지고 있다.
• Vue : 2014년 Evan You라는 개인이 개발한 Framework. 다른 프레임워크(라이브러리)에 비해 배우기 쉬움. 가장 나중에 생겼지만 성장 속도가 정말 빠르다. (MVVM Architecture, Model-View-ViewModel)

---

React란?

• 공식 사이트
• React는 페이스북에서 개발하고 관리 : 100% 오픈소스, 지속적인 버전업부분에서 신뢰도 높음
• 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리

The data returned from render is neither a string nor a DOM node — it’s a lightweight description of what the DOM should look like.
출처 : React 공식 사이트 https://reactjs.org/blog/2013/06/05/why-react.html

• 장점
  1. UI 업데이트의 간결성 : 가상 돔(Virtual Dom) 을 통해 UI를 빠르게 업데이트하여 불필요한 업데이트는 줄고, 성능은 좋아짐.
     (가상 돔 : 이전 UI 상태를 메모리에 유지해서, 변경될 UI의 최소 집합을 계산하는 기술 )
  2. 다른 프레임워크나 라이브러리와 혼용 가능
     React 에선 UI만 신경쓰고(View), 빠져있는 부분은 필요한 라이브러리를 사용하여 설정 가능
  3. 가장 큰 커뮤니티 : 지속적인 버전업부분에서 신뢰도 높음
• 단점 
  (장점이면서도 단점이 될 수 있는) 
  1. View만 담당하기 때문에 기타 기능은 모두 직접 구현해야함 (라우팅, Ajax 처리, 상태관리 등)
  2. v15부터 IE8 이하 버전 지원 안 함
  3. 간단한 기능 구현에서는 오버스펙이 될 수 있음

•