리액트 복습-2 Layout구성, React Router 사용해보기

1. 레이아웃의 구성

대부분의 레이아웃의 형태는 보통 Header, Content, Footer 구조로 이루어져 있습니다 이 페이지에서 변하지않고 항상 사용되는 영역은 어떤 영역일까요? 보통 Header, Footer 영역입니다 각 페이지마다 내용이 거의 변경되지않습니다

그렇기 때문에 별도 컴포넌트로 나눠서 관리하도록 했습니다

 

import { BrowserRouter as Router } from "react-router-dom"; //리액트 라우터를 사용하도록
import Header from "./layout/Header";
import Content from "./layout/Content";
import Footer from "./layout/Footer";

function App() {
  return (
    <Router> // URL에 따라 컴포넌트를 변경하기 위한 라우터 컴포넌트 SPA구조 구현을 위해 필수적인 컴포넌트입니다
      <>
        <Header /> //헤더 컴포넌트
        <Content /> //컨텐츠 컴포넌트
        <Footer /> //푸터 컴포넌트
      </>
    </Router>
  );
}

export default App;

 

 

2. 리액트 라우터

리액트 라우터를 사용하려면 패키지( "react-router-dom" )를 추가로 설치해줘야합니다

npm install react-router-dom

 

 

app.js 에서 리액트 라우터를 사용할 수 있도록 import 를 추가합니다

import { BrowserRouter as Router } from "react-router-dom"; // 라우터를 사용할 수 있도록!!
import Header from "./layout/Header";
import Content from "./layout/Content";
import Footer from "./layout/Footer";

function App() {
  return (
    <Router> // 최상위 컴포넌트를 Router로 감싸줘야합니다!
      <>
        <Header />
        <Content />
        <Footer />
      </>
    </Router>
  );
}

export default App;

React Router는 내부적으로 URL 상태를 관리하기 때문에 앱 전체를 Router 로 감싸줘야합니다

 

🎈Tip! BrowserRouter 의 주요 기능은 URL 관리, 히스토리 관리, 페이지 전환 감지, 새로고침 없이 전환하는 기능을 갖고있습니다!

 

그리고 라우터 종류는 

• BrowserRouter : 브라우저의 주소(URL)를 이용한 라우팅 (/home, /about)
• HashRouter : 주소에 #을 포함해서 라우팅 (#/home, #/about)
• MemoryRouter : 테스트용 등, 실제 URL을 안 쓰고 메모리에서만 관리

주요 라우터가 이렇게 존재하지만 대부분 서비스는 BrowserRouter를 사용합니다

이제 루트 컴포넌트에서 자식 컴포넌트도 Link, Route, useNavigate 를 사용할 수 있게됩니다

 

3. Header.jsx 에 사이트 메뉴 (GNB) 를 추가해봅시다!

import { Link } from "react-router-dom"; //리액트 라우터의 Link 컴포넌트 사용할 수 있도록 불러오기

const Header = () => {
  return (
    <header style={{ backgroundColor: "green" }}> //구분을 위한 bg 스타일지정
      <h1>My Blog</h1>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li> // a 태그를 리액트 라우터의 Link로 변경
          <li><Link to="/about">About</Link></li>
        </ul>
      </nav>
    </header>
  );
};

export default Header;

Link 컴포넌트는 페이지 새로고침을 하지않고 변경하기 위한 SPA를 구현하기 위한 필수 컴포넌트입니다

새로고침을 하지않고 속도가 a태그보다 빠릅니다 그리고 Route경로를 인식합니다

 

🎈Tip! navLink를 사용하면 현재경로와 같을때 isActive라는 정보를 받아 스타일을 자동 적용할 수 있습니다! 예로 현재 페이지 강조메뉴를 구현할 수 있겠죠!

 

다음은 navLink를 사용한 예 입니다

import { NavLink } from "react-router-dom";
import styled from "styled-components";

//styled-components 방식으로 스타일 지정!
const HeaderStyled = styled.header`
  background-color: green;
  padding: 1rem;
`;

const Title = styled.h1`
  color: white;
  margin: 0 0 1rem 0;
`;

const Nav = styled.nav`
  display: flex;
  gap: 1rem;
`;

// NavLink 스타일지정!
const MenuLink = styled(NavLink)`
  color: white;
  text-decoration: none;
  font-weight: 500;

  &.active {
    font-weight: bold;
    text-decoration: underline;
    color: yellow;
  }
`;


const Header = () => {
  return (
    <HeaderStyled>
      <Title>My Blog</Title>
      <Nav>
        <MenuLink to="/" end>
          Home
        </MenuLink>
        <MenuLink to="/about">
          About
        </MenuLink>
      </Nav>
    </HeaderStyled>
  );
};

export default Header;

이번에 styled-components를 사용하였기 때문에 코드가 많이 변경되었는데 자세히 보면 금방 이해할 수 있습니다