REACT_Router 3. 리액트 라우터 Test @version5.0

Eunsu·2021년 11월 7일

@ React_Library

목록 보기

4/5

라우터에 대한 개념이 제대로 안 서서 샌드박스에서 테스트를 좀 하려고 했더니
젠장 왜인지,,, version6로 바뀐 라우터들만 쓸 수 있어서.. 애를 많이 먹었다,,

예를들어 useHistory() => useNavigator() 로 바뀐것들,,

그래서 우선 버전을 낮춰서 라우터 해더를 구현해 test 해 보기로 한다.

ㅎ 오늘 참고로 일요일임 하 졸라 뿌듯해
일요일에 포스팅하고 공부함

Package

react-router-dom (@version 5.0.1)

styled-components

styled-reset

Directory

components
- App.js
-Header.js
-Router.js
-GlobalStyles.js

pages
-Home.js
- About.js
-Contact.js

index.js

1. globalstyles 설정

globalstyles란?'

전역스타일링이다. css는 전역으로 사용되며, css.module을 사용한다 하더라도 styles를 import 해서 사용하는 번거로움이 있다.

일반적으로 퍼블리셔 (나를 지칭하는거임.. ㅎ)는 모듈 css나 해당 css를 import하는 방식이 익숙하고 편하다. 하지만 많은 개발자들이 styled-components를 사용하는 이유는 컴포넌트의 캡슐화 때문이다. 전역으로 사용되는 css를 사용하다보면 클래스네임이 겹치지 않도록 신경써야 하고, 캡슐화하고 모듈화를 자칭하는 리액트의 의미가 사라지기 떄문이다.

그래서 styled-components를 사용하고, 전역 스타일 마저 하나의 컴포넌트로 관리한다. (styled-reset 사용)

GlobalStyles 설정

// GlobalStyles.js
const { createGlobalStyle } = require("styled-components");
const { default: reset } = require("styled-reset");
const GlobalStyles= createGlobalStyle`
    ${reset};
    *{
        margin: 0;padding:0;
    }
    body{
        font-size:14px;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        box-sizing: border-box;
    }
    a{
        text-decoration: none;color:inherit;
    }
    ul,li,ol{
        list-style: none;
    }
`
export default GlobalStyles;

//App.js
import React from 'react';
import GlobalStyles from './GlobalStyles';
export default function App() {
  return (
    <div className="App">
      <GlobalStyles />
    </div>
  );
}

2. Header UI 구현 (styled-components 사용)

//Header.js
import { Link } from "react-router-dom";
import styled from "styled-components";
export default function Header(){
  const Header= styled.header`
  width: 100%;
  height:60px;
  box-shadow: 1px 3px 5px rgba(0,0,0,0.2);
  `;
  const Nav= styled.nav`
  width: 1280px;margin:0 auto;
  display: flex;
  justify-content: space-between;
  line-height: 60px;
  `
  const Logo= styled.h1`
  font-size: 2rem;
  font-weight:600;
  `
  const NavList= styled.ul`
  display: flex;
  width:400px;
  justify-content: space-between;
  text-align: center;
  `
  const Items= styled.li`
    &:hover{
      text-decoration: underline;
    }
  `
  return <Header>
    <Nav>  
    <Logo><Link to="/">LOGO</Link></Logo>
    <NavList>
      <Items><Link to="/">Home</Link></Items>
      <Items><Link to="/about">About</Link></Items>
      <Items><Link to="/contact">Contact</Link></Items>
      </NavList>
      </Nav>
    </Header>
}

//App.js
import React from 'react';
import GlobalStyles from './GlobalStyles';
import Header from './Header';
export default function App() {
  return (
    <div className="App">
      <GlobalStyles />
      <Header />
    </div>
  );
}

3. Router 연결

//App.js
import React from 'react';
import { Route, Switch } from 'react-router';
import About from '../pages/About';
import Contact from '../pages/Contact';
import Home from '../pages/Home';
import GlobalStyles from './GlobalStyles';
import Header from './Header';
export default function App() {
  return (
    <div className="App">
       <GlobalStyles />
      <Header />
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/contact"  component={Contact} />
        <Route path="/about" component={About} />
      </Switch>
    </div>
  );
}

패스 연결 완료!

4. withRouter 사용하기

withRouter란?

Link 없이 props를 전달받아 랜더링을 가능하게 하는 react-router 컴포넌트 이다.

예를들어 About 페이지에 들어왔을 때 폰트색상과 백그라운드를 변경하고 싶다고 하자. 하지만 header에는 아무 router도 연결되있지 않기떄문에 props를 전달받을 수 없다. 그럴경우에 withRouter를 사용한다.

//Header.js
import { Link,withRouter } from "react-router-dom";
import styled from "styled-components";
export default  withRouter(function Header({location}){
    const {pathname}= location;
  const Header= styled.header`
  width: 100%;
  height:60px;
  box-shadow: 1px 3px 5px rgba(0,0,0,0.2);
  background-color: ${pathname.includes('about') ? `#000` : `#fff`} ;
  color: ${pathname.includes('about') ? `#fff` : `#000`} ;
  `;
  {... 생략}