Bong

SPA(Single page application)?

한 개의 페이지로 이루어진 애플리케이션.

• 전통적인 웹 페이지는 여러 개의 페이지로 이루어져 있다.

• 페이지 이동이 이루어질 때 마다. 새로운 html을 받아 해석한 뒤 보여 준다.

  → 웹에서 제공되는 정보가 많아 짐에 따라 서버 측에서 모든 화면을 준비한다면? 성능상 문제가 발생할 수 있다.

  → 캐싱, 압축으로 어느정도 해결 가능하나. 사용자와 인터랙션이 자주 발생하는 모던 웹 어플리케이션은 부적절 하다.

  → html을 계속 서버에 새로 요청하면? 사용자의 상태 유지가 번거롭고 바뀌지 않는 부분도 리 렌더링 하기 때문에 비효율 적이다.

리액트 같은 라이브러리 혹은 프레임워크를 사용하면?

• 렌더링은 브라우저 담당.
• 사용자와 인터랙션이 발생하면 필요한 부분만 js를 통해 업데이트 해준다.
• 새로운 데이터가 필요하다면?
  • 서버 api를 호출 해 필요한 데이터만 새로 불러와 사용한다.

SPA는 화면이 한 종류 일까?

• 서버에서 사용자에게 제공하는 페이지는 한 페이지 이지만 페이지에서 요청된 js 또는 주소에 따라서 다양한 화면을 보여 줄 수 있다.

라우팅

• SPA에서 다른 주소에서 다른 화면을 보여주는 것을 말한다.

SPA의 단점.

앱의 규모가 커지면? 자바 스크립트 파일이 너무 커진다.

• 한번에 모두 받기 때문에, 사용하지 않을 js파일 까지 모두 로딩한다.

  → 코드 스플리팅 으로 개선 가능.

JS를 실행하지 않는 일반 크롤러는 페이지의 정보를 제대로 수집 하지 못한다.

• 구글, 네이버, 다음 등 검색 결과가 제대로 나오지 않는다.

  → SSR (Server Side Rendering) 으로 모두 해결 가능.

React 이전

Jquery , Backbone, AngularJS

2006년 Jquery 등장 이후 Dom을 다루는 형식으로 표준 처럼 사용되었다.

Backbone과 AngularJS역시 돔을 다루는 중요한 방법으로 Jquery 사용.

React 등장

• Facebook이 만든 Javascript 라이브러리
• Facebook, Netflix, Dropbox, Twitter, Evernote, Uber 등 많이 사용함.
• View 라이브러리이다.

그래서 왜 React가 나왔는데?

• 기존 웹 프로젝트가 거대해지면, 코드의 양도 자연스럽게 증가

  → 기존 html, js 코드들이 분리되지 않기에 코드 가독성이 매우 낮아짐.

  → 관리의 효율이 매우 떨어진다.

• React는 Component와 Module로 어느정도 해결.

  → 뚜렷한 의미를 가지는 클래스들의 모듈화!

Component

• Ui를 구성하는 개별적인 뷰 단위.
• Component들이 결합되어 앱이 탄생.
• Component의 핵심은 쉽게 재사용이 가능하게!

→ 복잡한 화면을 각자의 개념으로 작은 단위로 쪼개고, 해결한 뒤, 다시 합쳐 해결!

→ 개념으로 쪼개다?? : 해결하는 방법을 각자가 가지고 있고 외부에서는 알 필요가 없다.

Jsx

• React를 위해 태어난 새로운 js문법.
• 기존 js는 화면을 표현하기 불편하기 때문에 등장.

Virtual DOM

• 이것을 가능하게 해주는 것이 Virtual Dom이다.

1. React Component 는 Render를 호출. 결과값을 Return한다.
2. React 는 새로운 Return 값을 가지고 새로운 Virtual DOM을 생성.
3. 현재 브라우저에 보여지고 있는 진짜 DOM과 비교하여 차이점을 찾아냄.
4. 차이점이 새긴다면 실제 Virtual DOM → DOM 적용.