[React] 리액트 탄생 배경 | 웹앱 | 리액트 컨셉 4가지

리액트는 2013년에 처음 생겼다. 

 

그 전엔 html, css, js로 UI를 만들었다. 

그리곤 이 언어들이 서버와 연결이 되었다. 

하지만  Fire Fox, IE, Chrome, Safari 많은 브라우저들이 있는데 

각 브라우저마다 다른 자바스크립트 코드를 짰어야 했다. 

그래서 제이쿼리가 나오게 된다. 

쉽게 document object model을 이용해 이 모든 브라우저를 사용할 수 있게 되었다. 

 

dom은 화면 오른쪽 클릭해서  inspect--> Elements를 보면 나오는 html 태그들이 dom이다. 

자바스크립트는 이 element를 업데이트나 삭제하는 등 modify 할 수 있게 되었다. 

 

jQuery ->

Backbone.js

라이브러리들이 점점 커지면서 자바스크립트 파일을 정리할 수 있는 백본.js가 나왔다. 

 

SPA 

그리고선 single page application(SPA)가 나왔다. 

이전까진 각 페이지마다 html 파일을 서버에서 보내줘야했지만 

이제는 클릭하면 링크로 보내줌..(?)

 

Ajax 

Angular.js

 

MVC / MVVM

Model View Controler 

 

 

---

 

리액트 4가지 컨셉

리액트가 성공한 이유 

 

1. Don't touch the DOM, I'll do it. 

Declarative 패러다임

 

Imperative 

직접 명령

원하는 태그를 선택해서 직접 변경함 

 

Declarative 

웹 페이지가 어떤 모습이길 말만해 명령하는 건 내가 할게 

 

2. build websites like lego blocks

각 components로 이뤄져 원하는 곳에 놓는다. 

콘솔 안 react 탭에 있는 html 태그는 component이다. 

다시 사용할 수 있고, 여러 군데 사용할 수 있다. 

다른 사람이 만든 컴포넌트도 쉐어할 수 있다. 

 

 

3.Unidirectional data flow

one way data flow

데이터가 위로 올라가는 않는다. 

 

Virtual DOM이 유저를 대신해 알아서 dom을 조종한다. 

콘솔 React 탭에 있는 html 태그로 보이는 것들은 js dom이다. 

 

 

4. UI, The rest up to you. 

Angular는 프레임워크인데 빌트인 스타일이다. 

이미 정해진 스타일이 있다. 

하지만 리액트는 아주 작은 단위로 쪼개서 내가 원하는 곳 아무 곳에 놓으면 된다. 

리액트 네이티브, VR, 다른 여러 곳에 같은 개념으로 사용이 된다. 

 

 

 

 

---

 

웹앱

 

웹이 앱과 사용성이 동일해서 웹앱이라고 부른다.

이런 웹앱을 만들 때 가장 많이 사용하는 것이 React / Angular/ Vue가 있다. 

이 중에 사용자가 가장 많은 리액트를 공부할 예정이다. 

 

메뉴바 하나 만들려면 부트 스트랩으로 엄청 긴 코드를 작성해야 했다.

하지만 다른 컴포넌트들을 사용해서 더 간단하게 코드 짤 수 있다. 

 

리액트 장점, 특징 

- 이 전엔 HTML, CSS, JS 다 따로 분리해서 코드를 짰지만 지금은 JSX에서 모두 모아 짤 수 있다. 

- 작은 단위로 모듈러하고, 재사용할 수 있는 코드로 짤 수 있다.

- 새로고침 안눌러도 자동으로 리프레쉬해준다 - 좋아요 갯수 자동 업, 메세지 갯수 자동으로 올라감 

- 전체 페이지가 아닌 변경 사항만 리랜더 해서 속도가 빠르다. 

diffing: compare (files) in order to determine how or whether they differ.

- pwa또는 React Native를 사용하면 그대로 앱으로 발행할 수 있다. 

- 이커머스는 구매율 높아짐