[React] 리액트에 대해 알아보자 (feat. 따라하며 배우는 리액트 A-Z)

1. 리액트? ✨

리액트는 '라이브러리'다.

 

라이브러리와 프레임워크의 차이점은 간단명료하다.

사용자가 얼만큼 자유롭게 사용할 수 있느냐.

 

특정 기능을 모듈화 하여 사용자가 필요한 것들만 쏙쏙 꺼내 쓸 수 있는 게 라이브러리다.

프레임워크는 어떤 앱을 만들기 위해 대부분의 필요한 것들을 구비해놓은 틀이다.

 

그래서 프레임워크 안에 라이브러리가 포함되어 있다고 볼 수 있다.

아무튼 Vue.js와 Angular가 프레임워크인 반면 React는 라이브러리라는 것이다.

 

이 라이브러리는 인터랙티브한 웹페이지를 만드는데 아주 유용하다.

---

2. 컴포넌트? 🤔

리액트는 여러 컴포넌트 조각으로 이루어져 있다.

컴포넌트는 리액트로 만들어진 앱을 이룰 수 있는 최소한의 단위를 말한다.

예를 들어 인스타그램의 경우 스토리 컴포넌트, 검색 컴포넌트, 프로필 컴포넌트 이런 식으로 쪼개어 볼 수 있다.

 



컴포넌트를 만들 수 있는 방법은 클래스형 / 함수형 2가지가 있는데 Hooks 발표 이후 함수형 컴포넌트를 더 선호한다고 한다.

---

3. 가상돔과 CRP ⚪️

리액트의 특징 중 하나는 가상 돔을 사용한다는 것이다.

가상 돔이 무엇인가? 진짜 가상의 DOM을 말한다. (물론 아직 진짜 DOM에 대해서도 깊게 공부해보지 않아서 모르지만)

어떻게 사용되는지를 알기 위해 브라우저가 렌더링 하는 과정을 먼저 알아보자.

 

웹 페이지 빌드 과정을 Critical Rendering Path - CRP라고 한다.

이 과정은 한 마디로 브라우저가 서버에서 페이지에 대한 HTML 응답을 받고, 스타일을 입혀 뷰포트에 표시하는 과정이다.

 

 

Render 엔진이 문서를 읽고 파싱해서 어떤 내용을 페이지에 렌더링 할지 결정하는 과정에서 DOM tree가 생성된다.

Render tree는 이후 브라우저가 DOM, CSSOM (이게 뭔지 검색해보자) 을 결합하는 곳으로, 화면에 보이는 모든 콘텐츠와 스타일 정보를 포함한 최종 렌더링 트리를 출력한다. 

Layout은 브라우저가 페이지에 표시되는 각 요소의 크기/위치를 계산하는 단계이며 이 다음 Paint에서 실제 화면에 그리기 시작한다.

 

그래서 CRP에는 문제점이 있다.

어떤 인터랙션에 의해서 DOM에 변화가 생기면 그때마다 렌더 트리가 재생성된다.

그 말은 모든 요소들의 스타일, 크기, 위치 등을 다시 계산해야 하고 위 과정을 모두 다시 거쳐야 한다는 뜻이다.

뭐 하나 바꿨는데 전체를 다시 해야 하는 것이 불필요하다고 느껴 이를 해결하기 위해 가상 돔이 나오게 되었다.

 

 

가상 돔은 실제 돔을 메모리에 복사해준 것이다.

데이터가 바뀌면 가상 돔에 렌더링하고 이전에 생긴 가상 돔과 비교해 바뀐 부분만 실제 돔에 적용한다.

바뀐 부분을 찾는 과정을 Diffing이라고 하며, 바뀐 부분만 실제 돔에 적용시켜주는 것을 재조정(Reconciliation)이라고 한다.

 

가상 돔을 사용하면 어떤 요소들을 30개 바꿨다고 했을 때 한 번에 묶어서, 한 번에 실제 돔을 수정/조작하게 된다.

그래서 CRP보다 훨씬 효율적이고 돔을 조작하는 비용도 줄일 수 있다.

---

4. 그래서 React는 어떻게 설치하나요? 🥹

Node.js와 npm을 설치하면 되는데 npm은 Node.js를 설치할 때 같이 설치된다.

 

Node.js는 크롬 V8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임(환경상태)로,

웹 브라우저가 아닌 환경에서도 자바스크립트를 사용할 수 있게 해준다.

 

이 녀석이 리액트에 필요한 이유는 직접적인 연관은 없어도 프로젝트를 개발하는 주요 도구들이 Node.js를 사용하기 때문이다.

바벨이나 웹팩 등이 그러한데, 예전에는 이 녀석들을 설치하고 설정해야 리액트 앱을 시작할 수 있었다.

 

바벨은 제법 많이 만나봤는데, 최신 자바스크립트 문법을 지원하지 않는 브라우저들을 위해 최신 자바스크립트 문법을 구형 브라우저에서도 동작할 수 있게 변환을 시켜주는 라이브러리다.

 

웹팩은 오픈 소스 자바스크립트 모듈 번들러(헥헥)로, 여러 개로 나눠진 파일들을 하나의 자바스크립트 코드로 압축하고 최적화 하는 라이브러리다. 따라서 로딩에 대한 네트워크 비용을 줄일 수 있고, 모듈 단위로 개발할 수 있고 가독성이 높고 유지보수에 용이하다는 장점이 있다.

 

아무튼 리액트는 npx create-react-app 폴더이름 으로 설치를 할 수 있다.

 

 

설치하고 나면 여러 개의 파일들과 폴더들이 생겨 있다.

여기서 public - index.html 은 페이지의 템플릿 역할을 하기 때문에 이름을 수정하면 안된다.

src - index.js 역시 자바스크립트의 시작점으로 수정하면 안된다. 

 

 

Package.json 파일에는 프로젝트에 대한 정보들이 들어있다.

어떤 라이브러리가 필요하고 그 버전은 무엇인지, 용도에 따라 어떤 스크립트를 쓰면 되는지 등...

 

그래서 리액트는 npm run start 라고 터미널에 입력하면 start 시 사용할 스크립트가 내장되어 있어 바로 사용이 가능하다.

---

5. SPA 1️⃣

SPA는 Single Page Application을 말한다. 하나의 페이지에서 모든 것을 표현할 수 있다.

 

옛날에는 페이지별로 html 파일이 필요했다. (당장 나만 해도 바닐라JS로 MBTI 테스트를 만들면서 16개의 html을 썼다 ㅋ)

하지만 요즘에는 리액트를 사용하면서 하나의 html 파일에서 동적으로 화면을 바꿔가며 표현한다.

 

index.html 밖에 없는 SPA에서는 페이지 전환을 어떻게 할까?

이 점은 나도 궁금했는데 HTML 5의 History API를 사용해 현재 페이지 안에서 화면 이동이 일어난 것처럼 작동 시켜준다.

 

History API는 React-Router-DOM을 이용해서 사용할 수 있다. 

 

 

실제로 npm run start 후 나온 리액트 웹페이지에서 구글로 갔다가 History.back()을 하니 원래대로 돌아왔다.

---