→ React란 무엇인가?

참고자료: [hymndev.tistory] React란 무엇인가?

참고자료: [hymndev.tistory] React란 무엇인가?

년도 역사 비고
1995 자바스크립트 탄생 (브렌던 아이크, 10일 개발) 크로스 브라우징 문제 → ECMA Script (표준)
2005 ajax 등장 (feat. google Map). jQuery 등장
2008 구글 크롬 브라우저. V8 자바스크립트 엔진 등장
2009 node.js 출시 (server) an open-source, cross-platform JavaScript runtime environment
2012 jQuery의 전성기 → ECMA 2015 (ES6)
2013 모듈화 개선 + SPA
MVC / MVVM → Flux (아키텍처 패턴) Flux 아키텍처를 제안한 React
2016 next.Js 등장

jQuery

  1. 배경 크로스 브라우징 이슈로 인해 Javascript 작성이 어려웠다. 또한 웹이 발전하여 로직이 복잡해짐에 따라 DOM 조작 횟수가 많아지게 되었다.
  2. 문제 이로 인해 유지보수가 힘들다는 문제가 생겼고 이를 해결하기 위해 jQuery 기술이 등장하게 되었다.
  3. 쇠퇴 ECMA 2015(ES6)가 크로스 브라우징 이슈를 해결하면서 반드시 jQuery를 사용할 이유가 없어졌으며, jQuery를 사용할 경우 글로벌 스코프 오염 이슈가 발생하였기 때문이다. (DOM을 조작한다는 행위에서 벗어나지 못하였다.)

아키텍처 패턴

1. MVC

https://developer.mozilla.org/ko/docs/Glossary/MVC

https://developer.mozilla.org/ko/docs/Glossary/MVC

모델 데이터와 비즈니스 로직 관리

뷰 (UI) 레이아웃과 화면 처리

컨트롤러 (정책) 모델과 뷰로 명령을 전달

  1. Model - View - Controller
  2. 사용자 인터페이스, 데이터 및 논리 제어를 구현하는데 널리 사용되는 소프트웨어 디자인 패턴
  3. 소프트웨어의 비즈니스 로직과 화면을 구분하는데 중점

2. MVVM

Untitled

모델 (데이터, 데이터로직)

뷰 (element, UI)

뷰모델 (element를 어떻게 보여줄지 정책 담당 로직) View를 나타내기 위한 데이터 처리를 담당

  1. Model - View - View Model
  2. Angular: 2010년 구글에서 개발한 프레임워크. TypeScript 기반으로 매우 안정적이나 무겁고 배우기 어렵다.
  3. Vue: 2014년 Evan You라는 개인이 만든 프레임워크. Angular와 React의 장점을 흡수해 만들어서 비교적 러닝 커브가 낮다.

3. Flux 아키텍처를 제안한 React(2013)

Untitled