React.js란?

A javascript library for building user interfaces

❗ A problematic situation

• mobile apps and desktop apps feel very reactive
  : things happen instantly
  : don't have wait for new pages to load or actions to start

• traditonally in web apps,
  you click a link and wait for a new page to load
  (click a button and wait for some action to complete)
  => could be a might cluncky,
  might have that latency where we wait for ne HTML page to load

🎈 how do we solve this problem?

==> javascript
javascript runs in the browser - on the loaded page
able to manipulate the HTML structure (DOM) of the page

=> allows us to change what the user see
without fetching a new HTML page

✨ So what is React.js?

1. a client-side JS library

2. all about building reactive user interfaces for the web

✨ Why do we need React.js?

React is all about splitting one's application
into small building blocks, small components, which has a clear task
(react library does the heavy things)

(ex) a to-do list with repetitive components

3. declarative, component-focused approach

SPA(Single Page Application)

• React can be used to control parts of HTML pages or enitre pages
  => "widget" approach on a multi-page-application
  (some) pages are still rendered on and served by a backend server
  
• React can also be used to control the entire frontend of a web application
  => SPA approach (much common approach)
  server only sends one HTML page,
  therefore, React takes over and controls the UI
  -> therefore a smoother UI
  

**What is SPA?**

https://blog.naver.com/seek316/222085340333
전통적인 방식의 경우 페이지에 변화 요소가 생길 때마다 서버에 request를 보내고 리소스들을 그때그때 받아옴
반면 SPA 방식은 모든 리소스를 서버로부터 한 번에 가져오고 변화 요소가 생길 때 이를 서버에서 처리하지 않고 현재의 페이지를 동적으로 다시 작성함
(라우팅, 컴포넌트 등의 특징이 있음)

Alternatives of React

React:

• focuses on component-based UI library
• need community packages for certain features(ex.routing)

Angluar :

• also focuses on component-based UI framework
• uses typescript
• contains lots of features (more than react, can be a overload for smaller projects)

Vue:

• an intersection of Angular and React
• component-based UI library + includes most core features

<요약>

전통적인 웹은 클라이언트 단에 변화 요소가 생길 때마다
서버에 request를 보내고 리소스를 가져오는 방식이다.
하지만 이는 비효율적이다.

이 문제를 javascript가 해결해줄 수 있다.
javascript는 서버로부터 로드된 페이지에서 동작하는데
HTML 구조 즉 DOM을 조작할 수 있기 때문에
클라이언트에 변화 요소가 생길 때마다 리소스를 새로 불러오지 않아도 된다
하지만 javascript는 일일이 모든 DOM에 접근해야 된다는 단점이 있다.
(반복적인 요소의 경우 일일이 각각의 DOM에 접근해줘야 한다)

그래서 등장한 것이 React(Vue, Angular)와 같은 라이브러리/프레임워크이다.
이들은 SPA(single-page application) 방식을 택하는데
서버로부터 한 번에 모든 리소스들을 가져오고
변화 요소가 생길 때마다 이를 서버에서 처리하지 않고
현재의 페이지에서 동적으로 처리한다.
이는 라우팅, 컴포넌트 등의 특징을 가진다.