react???

싱글 페이지 어플리케이션 SPA

라이브러리 

 

 

1. 자동 UI 업데이트

2. 코드 재활용을 많이 한다

3. 코드 정리가 깔끔

4. JSX 문법

 

이렇게 js 문법과 html 문법을 같이 쓰는 것을

jsx 문법이라고 한다.

 

 

 

 

 

 

 

 

 

Keyword

• Angular vs React vs Vue
• View 를 다루는 라이브러리
• Only Rendering & Update
  • NOT included another functionality (ex. http client, ...)
• Component Based Development
  • 독립적인 코드 블럭 (HTML + CSS + JavaScript)
  • 작업의 단위
• Virtual DOM
  • 이제는 DOM 을 직접 다루지 않음.
• JSX
  • NOT Templates
  • transpile to JS (Babel, TypeScript)
• CSR & SSR

 

Component ??

<!-- HTMLElement -->

<img src="이미지 주소"/>
  
<button class="클래스 이름">버튼</button>

<!-- 내가 만든 컴포넌트 -->

<내가지은이름1 name="Mark" />

<내가지은이름 prop={false}>내용</내가지은이름>

<!--

- src, class, name, props 밖에서 넣어주는 데이터
- 문서(HTML), 스타일(CSS), 동작(JS) 를 합쳐서 내가 만든 일종의 태그

-->

Component Tree => DOM Tree

Why Virtual DOM ?

• DOM 을 직접 제어하는 경우
  • 바뀐 부분만 정확히 바꿔야 한다.
• DOM 을 직접 제어하지 않는 경우    (react)
  • 가상의 돔 트리를 사용해서,
  • 이전 상태와 이후 상태를 비교하여,
  • 바뀐 부분을 찾아내서 자동으로 바꾼다.

---

CSR vs SSR

• CSR
  • JS 가 전부 다운로드 되어 리액트 애플리케이션이 정상 실행되기 전까지는
    화면이 보이지 않음.
  • JS 가 전부 다운로드 되어 리액트 애플리케이션이 정상 실행된 후,
    화면이 보이면서 유저가 인터렉션 가능
• SSR
  • JS 가 전부 다운로드 되지 않아도,
    일단 화면은 보이지만 유저가 사용 할 수 없음.
  • JS 가 전부 다운로드 되어 리액트 애플리케이션이 정상 실행된 후,
    유저가 사용 가능

React Client Side Rendering

React Server Side Rendering

---

https://slides.com/woongjae/react2021#/2/17

참고

React 2021