[리액트] 이론 2_이해하기

React란? 

- SPA에 특화된 Framework

(SPA 작업을 하는데 있어 효율적인 개발이 가능하도록 돕는 틀) 

- 서버에서 데이터가 내려오든 클라이언트에서 데이터를 들고 있어서 데이터를 내려주든 페이지에서 하나의 레이아웃이 완성되는 것

즉, 데이터에 반응해서 페이지 레이아웃을 그려주는 것

---

React는 어떻게 동작할까?

Angular, vue, svelte, react 이 네가지는 공통적으로 데이터 철학을 가지고 있다. 

각각 다 다른 개발자들이 개발했기 때문에 프로세스는 다르지만 가지고 있는 구조는 동일하다.

---

SPA Framework의 내부동작 방식

 

[Rendering Engine에 대해 다시한번 정리해보자]

기계는 0과 1밖에 알지못해서 브라우저와 통신하기위해 중간에서 OS가 기계와 브라우저와 통신을 한다.

OS와 브라우저가 통신을 하려면, 브라우저가 아는 웹 코드로 변환을 해 주어야 한다. 

 

브라우저 내부에는 Rendering Engine이 있어 html을 렌더링 엔진으로 만들어

브라우저에 뿌려주면 기계와 통신이 가능하다. 

 

Rendering Engine이 만들어지는 순서가 있다. 

 

html - DOM, CSS - CSSOM 두개가 합쳐져서 render tree가 배치와 paint를 한다. 

배치가 된 것을 대상으로 paint(칠)한다. 

배치와 페인트가 각자 독립적으로 하여 비효율적인 결과를 초래한다. 

 

Render Tree에서 batch와 paint를 독립적으로 하다보니 제어가 되지 않는 현상이 발생한다. 

예를 들어 각자 독립적으로 하니 한번씩 호출되어야 할 배치와 페인트가 몇 번씩이나 호출될 수도 있는 경우이다.

그래서 개발자들은 '한번만 호출하는 방법을 찾아서 html과 css를 쉽게 관리하는 틀을 만들자!' 라 해서 

이들은 "Virtual DOM" 즉, 가상 돔(가상으로 만들어진 돔이 하나 더 추가)을 만들었다.

 

html은 Virtual DOM을 거쳐서 DOM으로 간다. 

html을 작성하면 DOM이 변경해서 Render Tree를 만들 때 중간 과정에서 Virtual DOM이 불필요한 렌더링을 막아준다.

(만약 불필요한 렌더링이 생기면 DOM에 전달하지 않는다.)

---

1. Virtual DOM의 특징

가상돔은 한번에 모아서 렌더링 한다. 

ex) appendChild할 때마다 DOM에서 반응한다? > appendChild를 하는 순간 html에 코드가 추가된다. 

즉, render tree가 만들어져 배치하고 페인트 한다. 

appendChild할 때마다 새로 그리는 것이 아니라 한 번에 모아서 뭉탱이 채로 그린다.

만약 8번 appendChild를 한다면 batch와 paint 각각 8번, 즉 16번을 해야할 것을 Virtual DOM이 한번에 묶어서 각각 1번씩, 총 2번만 거쳐서 화면에 전달한다. 

but, Virtual DOM은 무거워서 그 단점이 있기도 하다.

 

2. 리액트의 기본 작성 법 

src안에는 components와 pages 두개의 폴더가 있어야 한다. 

  - component : 하나의 레이아웃을 만드는 가장 작은 개념

  - pages : 하나하나의 페이지를 모아놓은 폴더

 

 

  - jsx : 리액트에서 쓰이는 JavaScript 파일을 뜻함.

가장 작은 단위인 component를 포함하는 pages 의 index. jsx 파일 에서

import React from 'react'를 작성하여 이 파일은 리액트 파일이다. 이 파일에서 리액트 프레임워크의 기능을 사용할 것이다. 라는 의미를 뜻한다. 

react component는 반드시 html을 반환해야 한다.

html을 반환한 react component는 import로 가져와서 이 이름으로 html 태그처럼 사용이 가능하다.

 

TodoListPage 함수를 App.js에서 불러올 수 있도록 내보낸다.

 

<참고>

**폴더명은 소문자, 파일이름은 대문자로 통용된다.

 

**JavaScript가 실행이 되면 html과 css연산은 멈춰버리게 되고 JavaScript만 동작하게 된다. 

이를 해결하기 위해서 script태그가 body의 젤 하단에 위치하면 된다. 

 

다음에는 TodoList를 리액트로 만들어보고 리액트에 대해 더 자세히 알아보아요.