[Day 15] React Router, Sass에 대해

grl pwr·2022년 6월 7일

🌈 2022년 6월 7일

내일 수업에 배울 React Router와 Sass를 예습해보자

📌 Single Page Application

페이지가 한 개인 application
예를 들어, Westagram-frontend(첫 번째 프로젝트)는
1) login.html 2) main.html와 같이 페이지 수만큼 html 파일을 만들어서 작업했다. 하지만 리액트 프로젝트는 1개의 html 파일을 사용한다. 그것이 Single Page Application이다.
한 개의 웹 페이지(html) 안에서 여러 개의 페이지를 보여주는 방법이 바로 Routing 이다.
전통적인 웹 application은 여러 페이지로 구성되어 있었다. 유저가 요청할 때 마다 페이지가 새로고침 되어, 페이지를 로딩할 때마다 서버로부터 리소스를 전달 받아 해석 후 렌더링을 했다.
요즘에는 웹에서 제공되는 정보의 양이 많기 때문에 전통적인 방식으로 하면 속도적인 측면에서 문제가 있었고 이를 해결하기 위해 캐싱과 압축을 해 서비스가 제공됐다. 하지만 사용자와 interactions이 많은 현재의 웹 application에서는 충분하지 않았을 수 있고, 렌더링을 서버쪽에서 담당하면 그 만큼 렌더링을 위한 서버 자원이 사용되는 것이어서 불필요한 트래픽도 낭비 되었다.
그래서 리액트와 같은 library 또는 framework를 사용해서 뷰 렌더링을 유저의 브라우저가 담당하도록 하고 우선 application을 브라우저에 로드 한 다음에 정말 필요한 데이터만 전달 받아 보여준다.
Single Page라고 해서 한 종류의 화면만 있는것이 아니라 홈, 포스트 목록, 글쓰기 등의 다른 페이지의 화면이 한 페이지에서 보여지는 것. 이와 같이 다른 화면에 따라 주소도 만들어줘야 한다. 주소가 있어야 유저들이 공유할 수도 있고 북마크로 스크랩할 수도 있기 때문이다
이렇게 다른 주소에 따라 다른 뷰를 보여주는 것을 routing이라고 한다
리액트 자체에는 이 기능이 없다. 리액트가 Framework가 아닌 Library로 분류되는 이유이다. 따라서 우리가 직접 브라우저의 API를 사용하고 상태를 설정해 다른 뷰를 보여주어야 한다
아래에서 배울 React Router는 third-party library로서, 공식은 아니지만 가장 많이 사용되고 있는 라이브러리이다. 이 라이브러리는 클라이언트 사이드에서 이루어지는 라우팅을 간단하게 해준다. 서버 사이드 렌더링을 도와주는 도구들도 함께 딸려온다 그리고 이 router는 react-native에서도 사용 될 수 있다

📌 React Router

React Router는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리인 React를 위한 모든 기능을 갖춘 클라이언트 및 서버 측 라우팅 라이브러리입니다. React Router는 React가 실행되는 모든 곳에서 실행됩니다.
예) 웹, node.js가 있는 서버, React Native