1. React (Prologue)

웹 프레임워크, 자바스크립트 라이브러리 중 하나로 사용자 인터페이스를 만들기 위해 사용

Facebook에서 제공하는 프론트엔드 라이브러리로 SPA, Mobile 개발에 사용된다

 

React를 굳이 사용하지 않아도 웹을 만들 순 있지만,

사용자와의 인터렉션으로 동적인 UI를 쉽게 구현할 수 있다는 장점이 있다

 

React 의 특징

1) JS 기반

별도의 프레임워크를 배우는 것이 아닌 JS를 활용 (언어를 배울 필요 없이 HTML, JS로도 개발)

 

2) 선언형

UI를 쉽고 간결하게 만들어준다디자인 뷰와 연결된 데이터 변경 시 이에 맞는 컴포넌트들을 렌더링해서 화면을 구성

 

3) 컴포넌트

컴포넌트 단위의 요소 별로 개발이 가능 (재사용성, 활용도 증가)

JS, JSX를 알면 구현이 가능하기에 개발과 유지보수를 하는데에 있어서 장점

  

4) 단방향 데이터플로우

데이터가 UI로 이동하는 구조로 데이터 변경 시 UI가 업데이트

단, 단방향이라는 의미 그대로 UI쪽에서 데이터를 변화시키는건 불가능

 

5) Virtual DOM

(이해도가 부족, 추후 추가 예정)

 

 

1. CRA (Create React App)

Project 생성 시 사용하는 방법 중 하나로 꼭 사용할 필요는 없다

(단, HTML 파일 내에 스크립트로 직접 연결하는 것이 까다롭기 때문에 편의를 위해 사용)

 

- React와 같은 프로젝트를 손쉽게 생성해주는 것을 보일러플레이트(Boilerplate)라고 한다

- 많은 React용 보일러플레이트가 존재, 하지만 Facebook에서 제공하는 CRA를 많이 사용

 

보일러플레이트란?

변경 없이 혹은 최소한의 변경으로 여러곳에서 재사용되며, 비슷한 일을 반복작업 하는 것

 

 

* 다시 한번 정리하지만, React 개발을 위해 반드시 CRA를 사용해야하는 것은 아니다

  (단지, 익숙한 개발환경 및 유용한 기능들을 포함하고 있기에 사용을 권장할 뿐)

 

 

2. CRA의 장점

- 개발자에게 있어서 개발에 집중할 수 있는 환경을 제공

  비중이 떨어지는 코드는 노출시키지 않으며, 여러 설정들을 셋팅할 수 있게 Command 지원

- 모든 브라우저에서 해석될 수 있도록 transcompile 지원

 

transcompile이란?

브라우저 별 해석할 수 있는 JS의 버전이 다른데, 자동으로 해석할 수 있도록 변환 지원

대표적으로 Babel이 있는데 React는 Babel을 기본으로 내장하고 있다

 

이 외에도 코드 난독화, 압축 등을 지원하는 번들링, Webpack을 지원한다

 

 

3. SPA, CSR

1) SPA (Single Page Application

최초 한번의 페이지 로딩 이후 더이상 페이지를 로딩하지 않고 데이터만 변경하며 사용

(웹 구동시 하나의 html파일로만 동작, SPA는 CSR 방식)

 

2) CSR (Client Sida Rendering)

CS에서 HTML을 반환 후, JS가 동작하면서 데이터만 주고 받으며 클라이언트에서 렌더링 진행

(HTML 로드 → JS 로드 → JS 실행 → 서버에서 Data 받기 → Content 확인의 과정)

 

2-1) 장점

- 사용자의 액션에 따른 필요 부분만 렌더링하기 때문에 SSR보다도 빠른 Interaction 가능

- 페이지 전체를 요청하는 것이 아닌 부분 변경을 하기 때문에, 어디서든 빠른 속도로 렌더링

- lazy loading 지원, 페이지 로딩 시 상대적으로 중요하지 않은 부분의 리소스 로딩을 늦춤

- SSR이 따로 필요치 않아 일관적인 코드 작성이 가능

 

SSR이란?

Server Side Rendering, 서버에서 렌더링을 작업

하나의 html이 아닌, 서버가 가지고 있는 각각의 html, js 등을 요청 후 다운로드해서 렌더링

 

2-2) 단점

- 브라우저가 존재하지 않고 html만 가져오기 때문에 검색 노출이 되지 않는다

- html, js를 모두 읽은 후 화면을 렌더링 하여 사용자에게 보여주기 때문에 최초 구동이 느리다