[React] 리액트란?

React

리액트는 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리이다.

리액트: 라이브러리
앵귤러 : 프레임워크

---

라이브러리 vs 프레임워크 차이

프레임워크 : 어떠한 앱을 만들기 위해 필요한 대부분의 것을 가지고 있는 것 (더 큰 개념)

  -> 라이브러리를 포함하고 작성한 소스 코드를 호출한다.

라이브러리 : 어떠한 특정 기능을 모듈화 해놓은 것

  -> 소스 코드는 어떠한 기능을 구현하기 위해 라이브러리를 호출하게 된다.

 

리액트가 라이브러리인 이유

   : 전적으로 UI(사용자 인터페이스)를 랜더링 하는데 관여하기 때문이다.

---

리액트를 사용하는 이유

• 상대적으로 배우기 쉬운 라이브러리
• 여러 기능들을 위해 이미 만들어져 있는 라이브러리 환경
• 많은 기업들의 사용으로 검증이 된 라이브러리 (대표적 페이스북)

---

리액트 컴포넌트

컴포넌트(component) : 리액트로 만들어진 앱을 이루는 최소한의 단위

(검색 컴포넌트, 프로필 컴포넌트, 스토리 컴포넌트, 포스트 컴포넌트…)

여러 개로 나누어져 있기 떄문에 하나의 컴포넌트를 여러 곳에서 사용할 수 있다. (동시에 수정할 수 있음)

• 클래스형 컴포넌트
• 함수형 컴포넌트

초창기엔 클래스 컴포넌트를 많이 사용했지만, hooks 발표 이루엔 함수형 컴포넌트 많이 사용!

---

브라우저가 그려지는 원리 및 가상돔

웹페이지 빌드 과정(Critical Rendering Path CRP)

브라우저가 서버에서 페이지에 대한 HTML 응답을 받고 화면에 표시하기 전에 여러 단계가 있다.

웹 브라우저가 HTML 문서를 읽고, 스타일을 입히고 뷰포트에 표시하는 과정이다.

• DOM tree 생성 : 랜더 엔진이 문서를 읽어들여 파싱하고 어떤 내용을 페이지에 렌더링할지 결정한다.
• Render tree 생성 : 브라우저가 DOM과 CSSOM을 결합하는 곳으로 화면에 보이는 모든 콘텐츠와 스타일 정보 모두 포함하는 최종 렌더링 트리를 출력한다.

            → 화면에 표시되는 모든 노드의 콘텐츠 및 스타일 정보를 포함한다.

• Layout(reflow) : 브라우저가 페이지에 표시되는 각 요소의 크기와 위치를 계산하는 단계다.
• paint : 실제 화면에 그리기

문제 : 어떤 인터렉션에 의해 DOM에 변화가 발생하면 Render tree가 재생성된다. (모든 요소들의 스타일을 다시 계산..)

→ 작은 변화로 필요 과정을 계속 거치게 되니 불필요하게 DOM을 조작하는 비용이 크다.

 

그래서..가상 돔을 사용한다 ! 실제 DOM을 메모리에 복사해준 것.

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

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

이렇게 돔을 조작하는 비용을 줄이게 된다.

 

---

create react app 을 이용한 리액트 설치

원래는 webpack이나 babel같은 모듈을 설치하고 설정해야 리액트 앱을 시작할 수 있었다.

요즘엔...

npx create-react-app <폴더 이름>

이 명령어를 터미널에 입력해서 간단하게 설치할 수 있다.

• webpack

: 오픈 소스 자바스크립트 모듈 번들러로써 여러개로 나누어져 있는 파일들을 하나의 자바스크립트 코드로 압축하고 최적화하는 라이브러리다.

1. 여러 파일의 js 코드를 압축 , 최적화 → 로딩 줄어듬
2. 모듈 단위 개발, 가독성과 유지 보수가 쉽다.

• babel

: 최신 자바스크립트 문법을 지원하지 않는 브라우저들을 위해 최신 js 문법을 구형 브라우저에서도 돌 수 있게 변환 시켜주는 라이브러리

리액트 앱을 만들 폴더 생성 → 터미널 실행 → npx create-react-app ./

npx : 노드 패키지 실행을 도와주는 도구. npm 레지스트리에 있는 패키지를 폴더에서 실행해서 리액트를 설치해준다.

npm 레지스트리 : 라이브러리들이 저장된 곳

---

구조

이름이 수정되면 안되는 파일들

1. public/index.html
2. src/index.js

src 폴더

js/css 파일들을 넣으면 된다.

---

SPA(Single Page Application)

: 현재 App.js 파일의 소스 코드를 변경하면 변경한 부분이 화면에 적용이 된다.

요즘엔 웹사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현한다.

화면 변경

: HTML 5의 history API를 사용!

→ 현재 페이지 내에서 화면 이동이 일어난 것처럼 작동하게 해줌

• History.back() : 뒤로 가기
• History.forward : 앞으로 가기
• History.go() : 특정한 세션 기록으로 이동하게 해주는 비동기 메서드.
• History.pushState() : 주어진 데이터를 세션 기록 스택에 넣음. 직렬화 가능한 모든 js 객체를 저장 가능
• History.replaceState() : 최근 세션 기록 스택의 내용을 주어진 데이터로 교체

---

JSX(Javascript syntax extension)

: 자바스크립트의 확장 문법이다. 리액트에서는 이 JSX를 이용해서 화면에서 UI가 보이는 모습을 나타내준다.

UI를 나타낼 때 js(로직)과 HTML구조(마크업)를 같이 사용할 수 있어 기본 UI에 데이터가 변하는 것들이나 이벤트들이 처리되는 부분을 더욱 쉽게 구현할 수 있다.

→ 의무는 아니지만 개편함. 거의 다 씀.

원래는 React.createElement API를 사용해서 엘리먼트 생성(객체) → In-Memory에 저장 → ReactDOM.render 함수를 사용해서 실제 웹 브라우저에 그려준다.

 

JSX는 컴포넌트에 여러 엘리먼트 요소가 있다면 반드시 부모 요소 하나로 감싸줘야한다.