React의 가장 큰 특징은 SPA !
그럼 SPA란 무엇일까?
Single Page App
즉, 리액트는 페이지가 하나 !
그렇다면, html도 하나 !
리액트를 설치하고 나면, 깔리는 파일들 중에 index.html 파일이 있다. 이 파일 하나를 통해 앞으로 render를 돌면서 페이지가 계속 실행될 것을 암시한다.
index.html
<body>
<div id="root"></div>
</body>즉, index.html 속 id가 root인 div 덩어리가 계속 해서 바뀌는 것.
그리하여, JSX 문법 등장 !
앞으로 react 파일에서 html 파일은 index.html이 유일하다.
index.html를 제외하고 모두 js파일에서 JSX 문법을 활용하여 페이지를 렌더한다.
JSX : Javascript Syntax XML
즉, javascript 문법과 html 문법을 한꺼번에 작성하는 문법
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Router from './Router';
import './styles/reset.scss';
import './styles/common.scss';
ReactDOM.render(<Router />, document.getElementById('root'));index.html를 DOM으로 들고와서 index.js에서 render 해줌.
package.json
React의 요약본
- 이 파일의 정보를 보고 어떤 package가 깔려있는지 확인가능.
- 또 협업할 때, npm이 잘 깔려있는지 확인해볼 수 있는 중요한 정보들이 담겨있음.
여기서 잠깐 !
React의 package들을 알아보자 !Router.js : 경로를 지정하여 URL 이동
설치명령어 :
npm install react-router-dom --save
- URL에 세그먼트를 추가하고 UI 계층 구조에 레이아웃을 추가
- URL이 변경되면 레이아웃도 자동으로 변경
React Router 공식페이지Sass : 중복지정된 css의 분리
설치명령어 :
npm install sass --save
- css 전처리기
- sass문법을 이용해서 .css 파일을 .scss 파일로 변환
- 중첩, 믹스인, 상속으로 css 유지보수 기능 강화
Sass 공식페이지
.gitignore
git 이 추적하지 않아야하는 정보들을 담은 파일
예를 들면, 개개인의 중요한 정보, 무거운 캐쉬들 등등
