[React] 리액트가 뭐에요? : React 이론 핥기

 

리액트는 웹을 만드는데 사용하는 라이브러리다.

 

리액트만 있는건 아니다 . 웹을 만든다하면 아래처럼 여러가지를 사용할 수 있다. 

React & Vue.js & Angular

 

이중 Vue.js 와 Angular는 프레임워크이고, React는 라이브러리이다.

 

프레임워크 vs 라이브러리

프레임워크는 앱을 만들기 위해 필요한 대부분의 것을 가지고있는것을 말한다.

라이브러리는 어떤 특정 기능을 위해 모듈화해놓은 것을 말한다. 

프레임워크가 넓은 의미이다.  프레임워크는 앱을 만드는데 필요한 대부분의 라이브러리를 가지고 있으며, 라이브러리들은 각각 특정 기능을 위해 모듈화되어있다.

 

리액트는 UI를 렌더링하기 위해 사용하는 '라이브러리'이다. 라우팅은 react-router-dom , 상태관리는 redux, 빌드를 위해서 webpack, 테스트를 위해 eslint 등 다른 라이브러리와 함께 사용해야한다. 

 

웹얘기로 다시 돌아와보자.

 

웹 브라우저가 어떤 방법으로 웹을 이쁘게 올려주는걸까? : CRP (Critical Render Path)

CRP는 웹 브라우저가 서버로부터 html파일을 받은 뒤 웹상에 뿌리기 위해 수행하는 일련의 작업단계이다. 여기서는 간략하게 알아보도록 하자.  깊게 공부해보고 싶다면 여기

NitroPack 발췌

1. 서버로부터 HTML , CSS 를 받아온다.

2. DOM tree를 생성한다 : 어떤 내용을 페이지에 렌더링 해야하는지를 결정한다.

3. DOM 과 CSSOM 을 결합하여 Render Tree 를 생성한다 : 컨텐츠와 스타일 정보를 모두 포함하는 최종 렌더링 트리이다.

4. Layout을 생성한다: 브라우저에 나타날 각 요소의 크기를 결정한다.

5. Paint 그리쟈

 

오늘의 목적은 CRP를 뽀개는것이 아니다.. 여기서 유저의 interaction을 통해 dom tree의 내용이 달라진다고 해보자. 그러면 2번이 바뀌었으니까 3,4,5 를 거쳐 다시 리렌더링하는 상황이 발생한다. 인터렉션이 많은 웹의 경우 성능상 저하가 올 수밖에 없다.

이것을 해결하기 위해 virtual dom이 나타난다

 

Virtual DOM

유저의 인터렉션으로 인해 지속적으로 전체를 리렌더링하는 문제를 보완하기 위해 사용한다. 실제 돔과 동일한 돔복사본을 만들어놓는다.

인터렉션으로 인해 돔에 변화가 생길 경우 돔복사본과 변경된 돔을 비교한다(diffing).변경된 부분을 파악해서 실제 돔에 적용한다 (reconciliation, 재조정). 여러 부분이 바뀌었을 경우 한번에 묶어서 한번의 돔 수정으로 처리하기 때문에, 성능상 많은 도움이 된다. 리액트가 매우 빠른 비결이 여기에 있다고 한다.

 

 

 

그래서 리액트가 어떻게 동작하는거에요?? 

 

react-create-app을 통해 리액트 프로젝트를 만들고 실행해보면 , App.js안의 내용이 웹 상에 뿌려지는것을 볼 수 있다. 

리액트의 구조를 눈팅해보자 공식문서는 CreateReactApp 에서 확인해보자

리액트의 폴더구조

 

먼저 public/index.html 에 가본다. body 안에 이런 내용이 있다. 즉, root 내용을 뿌려주세요~ 이다. 근데 root에 뭐가 담겨있는지..?

 <div id="root"></div>

 

이제 자바스크립트의 시작점인 src/index.js에 가보자.

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

 

 

ReactDom에서 root를 생성하고, 거기에 <App/>을 랜더링하라는것을 볼 수있다. 즉, root를 만들어 거기에 App.js 내용을 렌더링하라고 지시하는것이다. 

 

엥 근데 app.js만 렌더링하나?? 다른 페이지로 이동해서 페이지가 변경될땐 어쩌나?

 

SPA (Single Page Application)

전통적으로 웹을 만들때, 템플릿을 여러개 사용했다. 예를들어 A page를 렌더링할땐 A.html 템플릿을, B page를 렌더링할땐 B.html 을 제작했었다. 이런 방식을 Multi Page Application이라고 한다. 페이지가 여러개라는 뜻이다. SPA는 MPA의 정반대이다.

웹사이트에 한 개의 페이지가 있고, 안에 있는 내용물을 슉슉 바꿔서 마치 페이지가 변경되는 것 처럼 보이게 한다. 

 

이게 어떻게 가능할까??

우리는 여기서 History API 를 사용한다. 자바스크립트 영역에서 historyAPI 를 이용해 현재 페이지 내에서 화면의 이동이 일어난 것 처럼 작동하게 해준다. 리액트에서는 react-router-dom 를 이용해 historyAPI를 사용한다. 

 

 

뽀나스

 

WebPack & Babel

리액트와 짝꿍처럼 따라다니는 웹팩과 바벨에 대해 알아보자.

WebPack : 여러 파일의 자바스크립트 코드를 압축하여 최적화한다. 로딩에 대한 네트워크 비용을 줄일 수 있다. 모듈 단위로 개발이 가능하여 가독성과 유지보수 100점이다

Babel : 최신 자바스크립트 문법을 지원하지 않는 브라우저들을 위해서 최신 자바스크립트 문법을 구현 브라우저에서도 작동할 수 있도록 변환해주는 라이브러리이다.

 

 

JSX (Javascript Syntax Extension)

JSX는 javascript의 확장 문법이다. 리액트에서는 jsx를 이용해 화면에서 UI가 보이는 모습을 나타낸다. (완전대세)

html과 비슷하게 생겼는데, html과 javascript를 동시에 사용할 수 있다는 장점이 있다. 기본 UI에서 데이터가 변하는 것들이나, 이벤트를 처리할때 더욱 쉽게 구현할 수 있다. JSX가 없다면 번거롭게 매번 모든 컴포넌트를 createElement() 하여 페이지에 붙여주어야하는데, 이 단계를 대폭 줄여준다.

 

참고로, 위에서 봤던 Babel 이 JSX를 다시 createElement() 형식으로 변환해주는 역할을 한다.