React란?
UI를 만들기 위해 페이스북에서 개발한 자바스크립트 기반의 프론트엔드 라이브러리
React 특징
- 이전 UI 상태를 메모리에 유지해서, 변경될 UI의 최소 집합을 계산하는 기술인 virtual dom이 리액트 구현의 핵심
- 하나의 페이지를 UI적으로 개발하기 편하게 해주지만 (Single Page Application), 다른 페이지를 불러오는 것이 불가능해서 React의 router 기능을 사용하여 다른 경로에 따라 다른 view를 보여줄 수 있게 해주어 단점을 보완
React 사용 이유
- 자바스크립트의 문법을 그대로 활용하기 때문에 편리하다
- 가장 커뮤니티가 넓고 레퍼런스가 많은 3세대 프론트엔드 기술이라, Angular나 Vue에 비해 정보량이 훨씬 더 많다
- Angular나 Vue에 비해 컴포넌트가 단순하고 간단하게 정의되어 있다
React 초기 환경 세팅
[1] node.js 설치 - node 홈페이지에서 다운로드
[2] node-v, npm-v를 통해 각가의 버전 확인 후 필요시 업데이트
[3] CRA 설치 - npm create-react-app "project name"
[4] 라우터 설치 - npm install react-router-dom --save
[5] sass 설치 - npm install node -sass --save
[6] 불필요한 파일들 제거 (ex. manifest.json, reportWebVitals.js, App.test.js, etc)
[7] public,src 폴더 생성 후, public에는 index.html, src에는 index.js 넣기
[8] Github repository와 리액트 프로젝트 폴더를 git으로 연동
[9] 초기 React Setting 완료
React 필수 용어
- Node.js: 자바스크립트 런타임 환경이며, 리액트 프로젝트를 개발하는 데 필요한 주요 도구들(ex.바벨, 웹팩)이 node.js 기반이기 때문에 반드시 설치
- npm: node package manager의 줄임말로, Node.js 의 기본 패키지 관리자 역할을 한다. npm을 통해 패키지 또는 모듈이라고 불리는 자바스크립트 소프트웨어를 현재 프로젝트에 설치 가능
- CRA: create-react-app의 줄임말로, 리액트로 웹 애플리케이션을 만드 는데 필요한 초기 환경 세팅을 해주는 도구 (toolchain)
- SPA: single page application의 줄임말로, 새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 데이터만 가져오는 형태
- Router: 리액트는 SPA 방식을 따라서 현재의 페이지를 완전히 재로딩할 필요 없이 필요한 데이터만 가지고 와서 재로딩 없이 렌더링해주게 된다. 이른 구현하고자 Third-party library인 react-router-dom을 사용해서 다른 경로(URL)에 따라 다른 view를 보여주게 하는 것
- Dom: 웹 페이지를 구성하는 요소를 구조화해서 나타낸 객체이며, 이 객체를 이용해서 웹 페이지 구성요소를 제어
- Virtual Dom: DOM을 추상화한 가상의 자바스크립트 객체. DOM을 조작할 때마다 브라우저가 렌더링을 하게 되면서 PC 자원 소모가 많아지는게 기존의 문제였는데, 변경 내역을 Virtual DOM으로 한 번에 모으고 이 Virtual DOM과 실제 DOM의 차이를 판단한 후, 서로 다른 부분만 찾아 수정 후 그에 따른 한 번의 렌더링만 하는 것으로 해결
React 초기 파일
node_modules - package.json에 명시된 모듈 뿐만 아니라 그 모듈이 의존하고 있는 모듈 전부를 포함하는 폴더. package.json만 있으면 npm install로 설치가 가능해서 .gitignore을 통해 주로 git 커밋시 제외
.gitignore - git 버전관리에서 제외할 파일 목록을 지정해주는 파일이며, 이 파일내에 지정된 파일들은 git upload시 자동으로 제외된다
package.json - 현재 리액트 프로젝트에 대한 정보와 의존성(dependencies)을 저장하는 파일. 이미 작성된 package.json 파일은 어느 프로젝트에서도 동일한 개발 환경을 구축할 수 있게 해준다
index.html - public 폴더에 들어있는 index.js에 대응하는 HTML 템플릿 파일이다. 이 파일은 직접 결과가 표시되는 것이 아니라 index.js에 의해 불러와서 렌더링 후 브라우저 상에 표시
index.js - src 폴더에 들어있는 메인 프로그램 파일이며, 여기에서 Javascript 컴포넌트 또는 HTML 템플릿들을 조합하여 렌더링하고 실제 브라우저 상에 표시
app.js - index.js에서 렌더링할 컴포넌트 관련 코드들이 담기는 파일으로써, 초기 리액트 세팅시 자동 생성되는 파일
