React Router & Sass

라우팅(Routing)

다른 경로(url 주소)에 따라 다른 View(화면)를 보여주는 것

SPA(Single Page Application)

html이 하나인 웹 애플리케이션

React-Router

• 설치 방법

  npm install react-router-dom

  설치 후 package.json의 dependencies항목에 react-router-dom가 추가 되었는지 확인 필요
  

• Router.js 작성

  // 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';                       
  
  const Router = () => {
  return (
  	<BrowserRouter>
  		<Nav />                                           // nav 컴포넌트
    <Routes>
      <Route path='/' element={<Login />} />               
      <Route path='/signup' element={<Signup />} />        
      <Route path='/main' element={<Main />} />            
    </Routes>
  		<Footer />                                        // footer 컴포넌트
  </BrowserRouter>
  );
  };
  export default Router;
  

1. react-router-dom 패키지에 BrowserRouter, Routes, Route 컴포넌트를 import한다.
2. BrowserRouter 컴포넌트로 전체를 감싸준다.
3. BrowserRouter 컴포넌트의 자식 요소로 Routes 컴포넌트를 넣어준다.
4. Routes 컴포넌트의 자식 요소로 Route 컴포넌트를 넣어준다.
5. Route 컴포넌트의 path 속성에 따라 화면에 그려줄 UI를 담은 컴포넌트를 import 한다
6. Route 컴포넌트의 path 속성을 설정해 주고, 설정한 경로(url)로 이동했을 때, 화면에 그려질 UI를 담은 컴포넌트를 element 속성에 설정한다.

• index.js

  // index.js
  
  	import React from 'react';
  	import ReactDOM from 'react-dom/client';
  	import Router from './Router';
  
  	const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(<Router />);

• Route 이동 (화면 이동 방법)

  1. Link 컴포넌트 사용
  - 클릭 시 바로 페이지를 이동하기 때문에, 조건 없이 페이지를 이동할 때 적합하다.
  - Nav Bar의 메뉴 혹은 Aside Menu 등 바로 페이지를 이동하는 경우 사용하는 것이 좋다.
  ex)

  <Link to='/signup'>회원가입</Link>

  2. useNavigate hook 사용
  - 조건에 따라 페이지를 전환해야 할 때 사용하기 적합
  ex)

  // Login.js
  
  	import React from 'react';
  	import { useNavigate } from 'react-router-dom';               // 1
  
  	const Login = () => {
  		const navigate = useNavigate();                             // 2
  
  		const goToMain = () => {                                    // 3
   		navigate('/main');
  		};
  
  		return (
   			<button className='loginBtn' onClick={goToMain}>          // 4
     			로그인
   			</button>
  		);
  	}
  
  	export default Login;

Sass & Scss

SASS 설치 : npm install sass

설치 후 package.json의 dependencies 확인 필요 !

Sass는 CSS 전처리기다.

실제 실행 전에 처리를 해줘서 브라우저가 읽을 수 있는 CSS 파일로 변환해 주는 일을 한다.
기존 CSS 파일에서 겪었던 불편한 부분들이 Sass를 사용하며 해결할 수 있다.

sass를 설치하고 기존 css파일의 확장자 명을 scss로 변경하면 scss 문법이 사용 가능하다.

Sass의 활용

• Nesting ⭐️⭐️⭐️
  className이 겹쳐 css가 망가지는 문제를 해결하기 위해 HTML 구조처럼 자식 관계에 있는 스타일을 품고, 그 안에 다른 태그들의 스타일을 적용하는 방법으로 구현할 수 있다.
  이러한 방법으로 className이 중복되어도 부모가 다르면 다른 스타일이 적용 된다.
  
• 변수
  여러 곳에서 사용되거나 오타가 나기 쉬운 속성을 변수로 저장하여 사용 가능하다.
• & 선택자
  &는 부모 선택자로 치환하여 사용 가능하다.
• mixin
  ( @mixin 변수 이름 { 여러 가지 스타일 속성 } )처럼 사용하여 중복되는 스타일을 묶어서 사용 가능하다.
  또한 인자를 받아 함수처럼 사용 가능하다.
  ( @include 변수 이름 )으로 사용가능하다.

강의 들으면서 궁금한 점

Q : a태그에 onclock 이벤트로 navigate함수 사용을 하면 Link태그와 같은 역할을 하나?
A : a 태그보다 Link 태그가 속도적인 측면에서 강한 건 알겠지만 위 방법을 사용하면 같은 게 아닐까 생각해 보았지만 아무리 찾아도 이런 질문을 하지 않아 해결하지 못했다..

Q :Link태그 css 는 a태그에 줘야하는가?
A : Link 태그는 가상의 태그로써 컴파일 시 a태그로 바뀐다 따라서 a 태그에 스타일링 하면 된다