[React 01] React 란?

* React란?
: React는 복잡한 사용자 인터페이스를 쉽게 구축하기 위해 페이스북에서 만든 JavaScript 라이브러리
: 각각의 독립적인 컴포넌트(HTML덩어리) 단위들을 서로 조립해서 만드는 것

* JSX 문법
- React에서 사용하는 문법
- 새로 배울 필요는 없는 문법, 쓰다 보면 알 수 있다

* 라이브러리 (도서관 = 책들의 집합)
- 모든 코딩을 직접하기에는 무리가 있습니다. 따라서, 시간 절약을 위해 남들이 짜놓은 코드를 가져와서 사용

---

* React 핵심 컨셉
- re-render와 component

* component
- 한가지의 기능을 수행하는 UI 단위
- 컴포넌트도 DOM TREE처럼 Virtual DOM TREE라는 가상의 돔트리(Virtual DOM TREE) 형식으로 만들어져 있다.

* re-render
- 쪼개진 컴포넌트를 사용자 화면에 구현할 때 사용하는 render 함수를 다시 호출하는 과정

---

naver.com을 주소창에 입력했을 때 일어나는 일

1. naver.com 을 입력
2. 브라우저가 도메인 (naver.com)을 통해 대응하는 주소
3. HTTP를 통하여 도메인서버에 맞는 도메인을 찾아내 페이지를 요청
4. WAS(서버도우미) 데이터베이스에서 데이터를 작업을 처리
5. 브라우저가 해당 서버에 html을 요청
6. 브라우저는 웹 페이지 결과물을 파싱 후 출력


HTML 파싱

1. 브라우저는 전달된 HTML을 분석 (브라우저 로더)
2. HTML -> DOM TREE , CSS -> CSSOM
3. DOM TREE -> Java Script 실행
4. CSSOM과 DOM TREE가 합쳐짐 -> 랜더링 트리
5. HTML에 CSS를 입혀줌(결정) 레이아웃 과정 (크기, 위치 계산)
6. 페인트 ( 화면에 그리는 작업 )

* Virtual DOM TREE
- React가 가지고 있는 가상 돔 트리
- 진짜 돔 트리 복사본

- 업데이트 이전의 가상 돔 트리 상태와, 업데이트 이후 가상 돔 트리 상태를 비교
- 업데이트 되는 내용이 있다면 그때 (Real) DOM TREE를 업데이트 한다.

---

* React를 쓰는 이유
- UI 재사용성이 좋으며, 코드 가독성이 높다
- 유지보수가 편해진다 ( 문제가 있는 컴포넌트를 빠르게 찾아낼 수 있음 )
- React Native ( 모바일 어플리케이션 제작 언어 ) 확장성

=> 결국 React는 복잡한 UI를 쉽게 제작하고 코드를 재사용하며 가독성을 높이기 위해 리랜더링과 
컴포넌트를 사용하는 Java Script 라이브러리다

---

yarn, npm, npx
- 세가지 모두 Node 프로젝트에서 설치되는 패키지나 라이브러리들을 관리해 주는 툴
- 리엑트는 여러가지 오픈 소스 라이브러리(도구)들을 빌려와 개발

npm
- 노드의 기본 패키지 관리 툴
- 사용 빈도가 가장 높음
- 리엑트 프로젝트 설치시 라이브러리를 다운 받아야하는데 무겁기 때문에 npm을 활용해서 프로젝트를 만들지 않음
- npm install 패키지명 
- npm i 패키지명

npx
- npm과 달리 패키지를 실행만 시켜주는 도구
- 개발을 하는 입장이라면 npm과 npx의 차이를 느끼지는 못함
- 단, npx를 사용하면 리엑트 프로젝트 설치 시 라이브러리를 다운 받지 않아도 되기 때문에 실행할 수 있습니다
- npm 5.2이상부터는 기본 패키지 관리툴에 포함 (npm -v로 확인)

yarn
- 과거 npm보다 속도, 안정성 모두 뛰어나 이목을 끌었음
- 현재 속도 안정성 모두 npm이 따라 잡은 상태
- 그러나 보안성에 있어서 만큼은 npm과 npx와 결이 다르다
- 하지만, npm이 가장 많이 쓰이기 때문에 yarn을 지원하지 않는 라이브러리 들이 존재
- 사용법 npm install -g yarn
- yarn add 패키지명

---

react web app 생성

터미널로 해당 경로 이동 후,

> npx create-react-app {app 이름}

 

 

CRA (create-react-app)의 장점
-바벨, 웹팩을 따로 설정하지 않아도 기본 패키지에 포함되어 있음

바벨
: ES6 이상의 문법의 코드들을 브라우저가 이해할 수 있도록 ES5이하의 문법으로 변환
: 트랜스파일러 - 번역기, 변환기
: 즉, 최신 버전이 지원되지 않는 브라우저에 그에 맞는 버전의 언어로 변환해주는 것

웹팩
: 가장 많이 사용 되는 모듈 번들러
: 애플리케이션을 구성하는 자원 (html, css, js, image ...)등을 모두 각각의 모듈로 보고
이를 조합해서 병합된 하나의 결과물을 만드는 도구

: 웹팩 v4 추가된 기능, 압축 = moment.js => 한국표준시? => 전세계의 표준시 => moment.js무게 무거움
해당 js에서 필요없는 모든 것을(ex) 러시아 표준시..) 덜어내줌

* 모듈
- 프로그래밍 관점에서 특정 기능을 갖는 작은 코드 단위 (코드 집합)

---

package.json

"script"에
"dev": "EXPORT PORT=3001 && react-scripts start" <-- 추가하면
맥은 set 대신 export

포트가 변경되고 npm run dev로 리액트를 실행할 수 있다
명령어는 npm run dev로 변경 (기존 명령어는 npm start )

터미널 종료 : Ctrl + c => y