◾️ SPA
- Single Page Application.
페이지가 단일인 어플리케이션이다.
보통의 웹 페이지는 사용자가 페이지를 이동할 때마다 새로고침되고 페이지를 로딩할 때마다 서버로부터 리소스를 받아 렌더링 한다. 그것을 multi page application이라고 하는데 이는 페이지가 들어갈 때마다 html 파일을 계속해서 받아온다. 하지만, single page application은 index.html만 받아오고 웹 문서를 더 이상 받아올 필요가 없다. 브라우저에 어플리케이션을 로드하고 이후에는 렌더링이 필요한 부분의 데이터만 불러오기 때문에 효율적이다.
그렇다면, single페이지에서는 어떻게 다른 페이지를 보여줄 수 있을까?
바로 라우팅 이다. 이것은 밑에서 다뤄보도록 하자.
◾️ Routing
- 다른 경로(url 주소)에 따른 다른
view(화면)를 보여주는 것
위에 말했던 것처럼, 리액트는 html이 하나인 Single Page Application이고, 다른 페이지로 이동하기 위해서는 라우팅을 사용해야 한다. 라우팅은 하나의 페이지 위에서 자바스크립트 코드로 동적으로 바꿔주면서 그때 그때마다 바꿔주는 것이다. 리액트에서는 자체적으로 이 기능을 제공하진 않는다. 리액트가 라이브러리로 분류되는 이유 중 하나가 바로 이것이다.
💡 프레임워크와 라이브러리의 차이점
프레임워크 : 정해진 구조와 틀, 기능들이 이미 정해져 있고, 개발자들은 그 구조 안에서 만들어 나가는 것
라이브러리 : 정해진 틀이랑 구조가 없고, 도구들만 정해준다. 그래서 그걸 사용해 자유롭게 만들어나가는 것
때문에, 리액트에서 제공하지 않는 것들은 추가적인 third-party 라이브러리로 보완하는 것이다.
react-router-dom을 사용하면 된다.
설치 : $npm install react-router-dom
- Route 이동하기
◾️ css 전처리기
-
CSS전처리기는 전처리기의 자신만의 특별한syntax를 가지고CSS를 생성하도록 하는 프로그램이다.
선택할 수 있는 많은CSS전처리기가 있다. 믹스인, 중첩 셀렉터, 상속 셀렉터, 기타 등등.. 이런 특징들은CSS구조를 가독성 있고 더 유지보수 하기 좋다. -
SASS
syntactically awesome style sheets
설치 :$npm install sass --save
