01.react 개요

---

react official page

1.Component

• react 는 component 로 구성된 JS library 입니다.

HTML element vs Component

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

• 위 와 같이 img, button 등 이미 정해져있는 tag 들을 이용해서 src 나 class 라는 attribute 에 입력을 해서 화면에 나타 내는 원리 입니다.

<!-- make component from user -->
<내가지은이름 1 name="jacob" />
<내가지은이름 prop={false}>내용</내가지은이름>

• component 는 내가 사용하겠다고 하는 것을 직접 만들어서 화면에 표현해 주는 것입니다.

2.Virtual DOM

• DOM 을 직접제어하는 경우

  • 바뀐 부분만 정확히 바꿔야 합니다

• DOM 을 직접제어하지 않는 경우

  • 가상의 DOM tree 를 사용해서,

  • 이전 상태와 이후 상태를 비교하여,

  • 바뀐 부분을 찾아내서 자동으로 바꾸어 줍니다

• Virtual DOM 은 먼저 diff 로 변경해서 re-render 과정을 거치게 됩니다.

(그림에서 빨간색 부분이 달라진것)

3.REACT CSR vs SSR

CRS

• react 는 js 로 이루어진 하나의 web app 이기 때문에, JS 의 전체가 다운로드 되어야지 실행이 가능하게 됩니다.

• 사용자가 처음 접속해서 html 을 다운 받게 되면 blank 상태인 비어있는 html 을 다운 받게 되고, 그 다음에 경로로써 JS 파일을 요청 하게 됩니다.

• JS 을 다시 다운로드 받게 되며, 다운받은 것에 script 가 browser 에 로드가 되고, 실행이 됩니다. (react web app 이 나타나게 됨)

• react 가 실행된 다음에 component 들이 실행되게 됩니다

SSR

• 최초에 이미 표현되어 있는 html 을 다운 받게 됩니다. html 구성 요소가 이미 되어 있기 때문에 JS 파일을 다운받게 되는 과정중에도 화면에는 html 파일 요소가 화면에 나타나게 됩니다

• 대신에 화면은 보여지기만 하는것이고, 터치나, 다른동작들은 JS 가 다운되고 react 가 실행되어야지만 작동을 합니다.

차이점

• CSR

  • JS 가 전부 다운로드 되어 react app 이 정상 실행되기 전까지는 화면이 보이지 않습니다.

  • JS 가 전부 다운로드 되어 react app 이 정상 실행된 후, 화면이 보이면서 유저가 사용가능합니다

• SSR

  • JS 가 전부 다운로드 되지 않아도, 일단 화면을 보이지만 유저가 사용할 수 없습니다.

  • JS 가 전부 다운로드 되어 react app 이 정상 실행된 후, 유저가 사용 가능합니다.

🔶 🔷 📌 🔑

Reference

• react official page- https://reactjs.org/docs/getting-started.html