학습 목표
- SPA가 무엇인지 설명할 수 있다.
react-router-dom를 이용해Router Component를 구현할 수 있다.react-router-dom에서Routing을 하는 방법 2가지와 차이점에 대해 설명할 수 있다.<Link> Component와<a> tag의 차이점에 대해 설명할 수 있다.css전처리기의 역할에 대해 설명할 수 있다.sass에서 제공하는 문법을 이용하여css파일을scss파일로 변환할 수 있다.
SPA가 무엇인지 설명할 수 있다.
- SPA(Single Page Application) - 페이지가 한 개인 애플리케이션
- 일반 프로젝트에서는 페이지마다 html파일이 존재
- 리액트 프로젝트에서는 html 파일 개수는 1개
- 한 개의 웹페이지(html)안에서 여러 개의 페이지를 보여주는 방법은? Routing
react-router-dom를 이용해 Router Component를 구현할 수 있다.
- 새로운 Router 라는 js를 만든 뒤 거기에
import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Nav from "./components/Nav/Nav";
import Footer from "./components/Footer/Footer";
import Login from "./pages/Login/Login";
import Signup from "./pages/Signup/Signup";
import Main from "./pages/Main/Main";
function Router() {
return (
<BrowserRouter>
<Nav />
<Routes>
<Route path="/" element={<Login />} />
<Route path="/signup" element={<Signup />} />
<Route path="/main" element={<Main />} />
</Routes>
<Footer />
</BrowserRouter>
);
}
export default Router;를 적어준다. Nav나 Footer 그리고 Signup등 없는 파일들은 삭제를 해준다.
그 다음 index.js 에 가서
ReactDOM.render(<Router />, document.getElementById('root'));를 적용시켜주면 됩니다. <Router />라고 적어야합니다.
react-router-dom에서 Routing을 하는 방법 2가지와 차이점에 대해 설명할 수 있다.
먼저 Route 이동 방법엔 두 가지 방법이 있습니다.
1. <Link> 컴포넌트를 사용하는 방법
2. useNavigate로 구현하는 방법
<Link>컴포넌트 사용하는 방법
import React from "react";
import { Link } from "react-router-dom";
function Login() {
return (
<div>
<Link to="/signup">회원가입</Link>
</div>
);
}
export default Login;<Link /> 컴포넌트는 DOM에서 <a> 로 변환(Compile) 됩니다.
<a>태그와 마찬가지로 <Link>컴포넌트도 지정한 경로를 바로 이동시켜주는 기능을 합니다.
다른점은 <a> 태그의 경우는 '외부 사이트'로 이동하는 경우고,
<Link>는 프로젝트 내에서 페이지를 전환한다는 점입니다.
useNavigate 로 구현하는 방법
import React from "react";
import { useNavigate } from "react-router-dom";
function Login() {
const navigate = useNavigate();
const goToMain = () => {
navigate("/main");
};
// 실제 활용 예시
// const goToMain = () => {
// if(response.message === "valid user"){
// navigate('/main');
// } else {
// alert("가입된 회원이 아닙니다. 회원가입을 먼저 해주세요.")
// navigate('/signup');
// }
// }
return (
<div>
<button className="loginBtn" onClick={goToMain}>
로그인
</button>
</div>
);
}
export default Login;함수 호출을 통해 페이지를 이동하는 방법 useNavigate 훅을 실행하면 페이지 이동을 할 수 있게 해주는 함수를 반환합니다. 해당 함수를 navigate라는 변수에 저장합니다.
두 가지 방법의 활용법
<Link />
- 클릭 시 바로 이동하는 로직 구현 시에 사용합니다.
- 예: Nav Bar, Asid Menu, 아이템 리스트 페이지에서 아이템 클릭 시 > 상세 페이지로 이동
useNavigate
- 페이지 전환 시 추가로 처리해야하는 로직이 있을 경우
- Case 1: 회원가입 되어 있는 사용자 > Main 페이지로 이동
- Case 2: 회원가입이 되어 있지 않는 사용자 > Singup 페이지로 이동
<Link> Component 와 <a> tag 의 차이점에 대해 설명할 수 있다.
a태그에 herf 로 이동하면 상태 값을 잃고 속도가 저하된다.
리액트는 단일 url을 가지고 SPA로 사이트를 표현하기 때문에 하나의 HTML페이지와 애플리케이션 실행에 필요한 자바스크립트와 CSS 같은 모든 자산을 로드하는 애플리케이션이다.
해당 이유로 페이지를 새로 불러오게 되면 앱이 지니고 있는 상태가 초기화되고, 랜더링 된 컴포넌트도 모두 사라지고 새로 랜더링을 해야 한다.
반면 Link 컴포넌트는 HTML5 History API를 사용하여 브라우저의 주소만 바꿀 뿐, 페이지를 새로 불러오지는 않는다. 따라서 리액트는 Link 컴포넌트 사용을 권장한다.
그런데 Link 컴포넌트를 사용하면 개발자 도구에서 a태그로 바뀐다
css 전처리기의 역할에 대해 설명할 수 있다.
css는 웹 개발 작업이 커지면서 점점 불편함이 생긴다. 코드가 지저분해질 수도 있고 유지 보수 측면에서 불리한 점이 생길 수 있습니다. 대표적인 css 전처리기로는 Sass가 있습니다.
Sass는 코드를 작성할 때 중괄호({})를 사용하는 대신 파이썬과 같이 들여쓰리고 구문을 감지하며, 세미콜론(;)을 사용하지 않습니다. 이후, Sass를 개발하는 사람들은Sassy Css를 의미하는 SCSS를 제공하게 됩니다. 즉, css와 거의 비슷한 문법으로 Sass를 지원하자는 것입니다. SCSS는 코드 작성 시 css와 동일하게 중괄호나 세미콜론 등을 사용합니다.
- 참고로, Sass, SCSS 등으로 작성된 파일들은 곧바로 웹에 적용될 수는 없습니다. 웹은 기본적으로 css 파일로만 동작하기 때문에 이 파일들은 별도로 컴파일하는 과정을 거친 다음, css 파일로 변환하여 사용하게 됩니다.
sass에서 제공하는 문법을 이용하여 css파일을 scss파일로 변환할 수 있다.
이건 강의를 보며 작업 해보는 걸로..!
