[KDT]FCFE - 8주1일 React - Router - DOM

Keunyeong Lee·2022년 1월 10일
0
post-thumbnail

React

Router

queryString

  • 주소 뒤에 ?key=value 를 입력하는 형식을 queryString 이라고 한다.

사용법

?name=mark

  1. 내장 함수 사용하기.
export default function Home(props) {
  const searchParams = props.location.search;
  const urlObj = new URLSearchParams(searchParams);
  console.log(urlObj.get("name"));
  return <div>Home 페이지 입니다.</div>;
}
  1. query-string npm으로 받아서 사용하기

npm i query-string

import queryString from "query-string";
export default function Home(props) {
  const searchParams = props.location.search;
  const query = queryString.parse(searchParams);
  console.log(query); // {name : "mark"}
  return <div>Home 페이지 입니다.</div>;
}

Switch

  • 여러 route 중 순서대로 먼저 맞는 하나만 보여준다.

  • exact를 뺄 수 있는 로직을 만들 수 있다.

  • 가장 마지막에 어디 path 에도 맞지 않으면 보여지는 컴포넌트를 설정해서, "Not Found" 페이지를 만들 수 있다.

import { BrowserRouter, Route } from "react-router-dom";
import { Switch } from "react-router-dom";
import Home from "./pages/Home";
import Profile from "./pages/Profile";
import About from "./pages/About";
import NotFound from "./pages/NotFound";
import { Btn } from "./components/button";
import "./App.css";

function App() {
  return (
    <div id="app">
      <BrowserRouter>
        <Switch>
          <Route path="/Profile/:id" component={Profile} />
          <Route path="/About" component={About} />
          <Route path="/" exact component={Home} />
          <Route component={NotFound} />
        </Switch>
      </BrowserRouter>
      <Btn />
    </div>
  );
}

export default App;

jsx 링크로 라우팅 이동하기

  • react-router-dom 에서 Link 태그 가져다 이용하기
import { Link } from "react-router-dom";

export default function Links() {
  return (
    <ul>
      <li>
        <Link to="/">Home</Link>
      </li>
      <li>
        <Link to="/About">About</Link>
      </li>
      <li>
        <Link to="/Profile">Profile</Link>
      </li>
      <li>
        <Link to="/Profile/1">Profile/1</Link>
      </li>
      <li>
        <Link to="/?name=Mark">Home/?name=Mark</Link>
      </li>
    </ul>
  );
}
<NavLink
  to="/About?name=keunyeong"
  activeStyle={{ color: "red" }}
  isActive={(match, location) => {
    console.log(match === null);
    console.log(location);
    return location.search !== "";
  }}
>
  About?name=keunyeong
</NavLink>

JS 로 라우팅 이동하기

export default function Login(props) {
  console.log(props);
  const login = () => {
    setTimeout(() => {
      props.history.push("/");
    }, 1000);
  };

  return (
    <div>
      <h2>로그인 페이지 입니다.</h2>
      <button onClick={login}>로그인</button>
    </div>
  );
}

props 전달하기

  • 일반적인 전달
// Login.jsx

import LoginButton from "./LoginButton";

export default function Login(props) {
  return (
    <div>
      <h2>로그인 페이지 입니다.</h2>
      <LoginButton {...props} />
    </div>
  );
}
  • withRouter 사용하기 (HOC)
// LoginButton.jsx

import { withRouter } from "react-router-dom";

export default withRouter(function LoginButton(props) {
  console.log(props);
  const login = () => {
    setTimeout(() => {
      props.history.push("/");
    }, 1000);
  };

  return <button onClick={login}>로그인</button>;
});

Redirect

  • 지정된 url로 바로 이동시키기!

render={()=>{return isLogin ? : }}

import { BrowserRouter, Route, Redirect } from "react-router-dom";
import { Switch } from "react-router-dom";
import Home from "./pages/Home";
import Profile from "./pages/Profile";
import About from "./pages/About";
import NotFound from "./pages/NotFound";
import Links from "./components/links";
import NavLinks from "./components/NavLinks";
import Login from "./components/Login";
import "./App.css";

const isLogin = true;

function App() {
  return (
    <div id="app">
      <BrowserRouter>
        <Links />
        <NavLinks />
        <Switch>
          <Route path="/Profile/:id" component={Profile} />
          <Route path="/Profile" component={Profile} />
          <Route
            path="/Login"
            render={() => {
              return isLogin ? <Redirect to="/" /> : <Login />;
            }}
          />
          <Route path="/About" component={About} />
          <Route path="/" exact component={Home} />
          <Route component={NotFound} />
        </Switch>
      </BrowserRouter>
    </div>
  );
}

export default App;

React Component Styling

Style Loaders

  • webpack 이 각 확장자명(sass, scss)에 맞는 파일을 찾아 css 파일로 변환한다고 설정되어있다.

import './App.css';

전역 css style로 설정됨.

  • 변환하기위해서는 module을 설치해줘야한다.

npm i sass

  • 이미 변환할것이라고 설정이 되어있기 때문에 모듈을 설치해주기만하면 된다.

CSS module, SASS module

App.module.scss

  • className 을 전역적으로 오염되지 않는 지정값으로 만들어준다.

classNames 라이브러리 사용하기

npm i classnames

import classNames from 'classnames';

console.log(classNames('foo',{bar:true});

// foo bar

console.log(classNames('foo',{bar:false});

// foo
  • css.module 를 사용하기 위해서 bind 방식을 제공한다.

  • bind 인자로 styles 를 넣고 변수에 담아두면

  • 변수의 인자로 styles 에 설정해놓은 class 만 넣어도 변환해준다.

import styles from './Button.module.css
import classNames from 'classnames/bind';

const cx = classNames.bind(styles);

console.log( cx('button','loading') );

// Button_button_2ce79 Button_loading_XEngF
profile
🏃🏽 동적인 개발자

0개의 댓글