React란?

• React는 복잡한 사용자 인터페이스를 쉽게 구축하기 위해 페이스북에서 만든 Javascript 라이브러리
• 각각의 독립적인 컴포넌트 단위를 서로 조립해서 만든다.

JSX문법(Javascript XML)

• React에서 사용하는 문법

const element = <h1>Hello, world!</h1>;

• 위와 같이 React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리(마크업은 마크업대로 자바스크립트는 자바스크립트대로 분리해서 사용)하는 대신, 둘다 포함하는 컴포넌트라고 한다.

주의
JSX는 HTML보다는 JavaScript에 가깝기 때문에, React DOM은 HTML 어트리뷰트 이름 대신 camelCase 프로퍼티 명명 규칙을 사용합니다.
예를 들어, JSX에서 class는 className가 되고 tabindex는 tabIndex가 됩니다.

라이브러리

• 다른 개발자들이 코드를 개발하여 만든 기능
• 사용이유? 모든 코드를 직접 코딩하는데 오래걸리고 효율적이지 못한다.
• 단점? 많이 사용하면 할 수록 용량을 많이 소모함.(페이지 로드시간)

React의 핵심컨셉

• re-render와 components

re-render

• 쪼개진 컴포넌트를 사용자의 화면을 구현할 때 사용하는 render함수를 다시 호출하는 과정
• 업데이트 이전의 가상 돔트리 상태와 업데이트 이후의 가상 돔 트리 상태를 비교
• 업데이트 된 내용이 있다면 그 때 React Dom Tree를 업데이트 한다.

컴포넌트(component)

• 한가지의 기능을 수행하는 UI(User Interface)단위
• 컴포넌트 DOM tree 처럼 하나의 Virtual Dom Tree라는 Tree형식으로 만들어져있다.

Virtual Dom Tree(가상돔)

• React가 가지고 있는 가상 돔 트리
• 진짜 돔 트리를 복사한 것.

  참고
  HTML 파싱 과정을 이해하고 DOMtree를 이해하자
  브라우저에 전달된 HTML 분석
  -> HTML 파싱 (DOM-tree)
  -> CSS 파싱(CSSOM 생성)
  -> DOM-TREE, 자바스크립트 엔진 자바스크립트 실행(인터프린터)
  -> HTML,CSS 합쳐서 렌더링 엔진
  -> HTML에 CSS 결정 후 레이아웃 과정(크기, 위치 계산)
  -> 페인트(화면에 그리는 작업)
  ↓ dom트리 생성
  
  ↓ cssom트리 생성
  

React를 쓰는 이유

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

yarn, npm, npx

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

npm

• 노드의 기본 패키지 관리 툴
• 사용빈도가 가장 높음
• create-react-app 실행 시 라이브러리 다운 받아야되는데 엄청 용량이 큼
• npm을 통해서 react Project를 만들기 않는다.
• npm install 패키지 명

npx

• npm과 달리 패키지를 실행만 시켜주는 도구
• 개발 하는 입장이라면 npm과 npx의 차이를 알 수 없다.
• npx를 사용하면 create-react-app을 install하지 않아도 실행시킬 수 있다.
• npm5.2이상부터는 기본 패키지 관리툴에 포함

yarn

• 과거 npm보다 속도, 안정성 모두 뛰어나 주목을 받음
• 현재 속도, 안정성은 npm이 따라 잡음
• 보안성에 있어서 만큼은 npm과 npx와 결이 다름
• 하지만 npm이 가장 많이 쓰이기 때문에 yarn에서 지원하지 않는 패키지가 많음
• npm install -g yarn
• yarn add 패키지 명

리엑트 설치하기

npx create-react-app 프로젝트명

create-react-app
웹팩을 따로 설정하지 않아도 포함되어 잇어 돌아간다
직접 구조를 만들려면 다 설정해야한다

웹팩

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

---

모듈

• 프로그래밍 관점에서 특정 기능을 갖고 있는 작은 코드 단위
• 기능을 하는 코드 집합

---

-> 웹팩은 JavaScript는 굉장히 대규모 환경이기 때문에 다양한 라이브러리와 모듈들 관련 리소스들을 브라우저에서 이용 할 수 있는 번들로 묶어서 결과를 만들어내는 것

폴더 정리하기

리엑트를 설치하고 나면 프로젝트를 진행할 때 불필요한 파일들이 존재한다.
이를 삭제해주고 수정하는 작업을 한다.

위와 같은 파일들만 남기고 모두 삭제한다.

index.js

아래와 같이 필요하지 않는 함수실행 부분을 삭제한다.

App.js

아래와 같이 App.js 도 내용을 삭제한다.
return 값에 아무 값도 없으면 오류가 발생하니 뭐라도 적어주자

실행하기

터미널에 npm start 입력
포트번호는 기본값으로 3000이 실행된다.
실행 포트번호를 바꾸고 싶다면 다음을 수정한다

port 수정

package.json
-> "script"
-> "dev" : "set PORT=3001 && react-script start" 입력

실행은 start가 아닌 run key명으로 한다. 여기서 key는 dev로 만들었다.
npm run dev >> 변경된 포트번호 확인