React-router-dom v5

브라우저에서 최초에 root 경로로 요청을하면,
React Web App을 내려준다
내려받은 App 에서 다른 페이지로 이동하는 동작을 수행하면,
새로운 경로에 맞는 컴포넌트를 보여준다

1	$ npm i react-router-dom

cra에 기본 내장된 패키지가 아님
react-router-dom은 facebook의 공식 패키지가 아니다

특정 경로에서 보여줄 컴포넌트 준비

‘/‘ => Home 컴포넌트
‘/profile’ => Profile 컴포넌트
‘/about’ => About 컴포넌트

import { BrowserRouter, Route } from 'react-router-dom'
import './App.css'
import Home from './pages/Home'
import Profile from './pages/Profile'
import About from './pages/About'

function App() {
  return (
    <BrowserRouter>
      <Route path='/' component={Home}></Route>
      <Route path='/profile' component={Profile}></Route>
      <Route path='/about' component={About}></Route>
    </BrowserRouter>
  )
}

export default App

about 페이지에 들어가도 home 컴포넌트가 같이 렌더 된다

about path에 ‘/‘가 포함되어 있기 때문에 루트경로인 Home도 출력되는 것

path가 완전히 같을경우에만 해당 페이지가 보이도록 exact를 Route에 추가 해준다

function App() {
  return (
    <BrowserRouter>
      <Route path='/' exact component={Home}></Route>
      // exact를 추가 해준다
      <Route path='/profile' component={Profile}></Route>
      <Route path='/about' component={About}></Route>
    </BrowserRouter>
  )
}

이제 home이 같이 출력 되지 않는다

만약 경로가 ‘/profile’의 하위라면 (ex: ‘/profile/name’) profile의 route에 exact를 추가 해주면 된다

Dynamic 라우팅 (1)

Routes의 경로에 특정 값을 넣어 해당 페이지로 이동할 수 있게 하는 것을 말한다.

function App() {
  return (
    <BrowserRouter>
      <Route path='/' exact component={Home}></Route>
      <Route path='/profile' exact component={Profile}></Route>
      <Route path='/profile/:id' component={Profile}></Route>
      <Route path='/about' component={About}></Route>
    </BrowserRouter>
  )
}

path 주소 뒤에 :[값의 이름] 으로 붙여 주면 된다
이름은 아무렇게 적어도 상관없지만 알기 쉽게 쓰는게 좋겠다
id 값을 받아와서 id값에 해당하는 페이지로 이동할 수 있다

export default function Profile(props) {
  console.log(props)
  const id = props.match.params.id
  console.log(id, typeof id)
  return (
    <div>
      <h2>Profile 페이지 입니다.</h2>
    </div>
  )
}

/profile/1 주소로 접속 해본다

컴포넌트에서 데이터가 들어올때는 props로 받아온다 console로 props를 찍었을 시

1	url에 :id로 지정했던 key와 주소로 접속할때 사용한 값인 1이 params의 값으로 들어가 있다

Dynamic 라우팅 (2)

1	http://localhost:3000/about?name=mark

주소 뒤에 ?로 시작해서 뒤에 붙는것은 쿼리 스트링이다
쿼리가 있어도 페이지는 about이며 없어도 about이다.
쿼리가 붙는다고 해서 profile처럼 추가적으로 라우트 처리를 할 필요가 없다

export default function About(props) {
  console.log(props)

  return (
    <div>
      <h2>About 페이지 입니다.</h2>
      {query.name && <p>name은 {query.name}입니다.</p>}
    </div>
  )
}

라우트처리 한 것과는 다르게 key.value 형식으로 된 것은 보이지 않는다
search에 있는 “?name=mark”를 key.value 형식으로 처리 해줄 필요가 있다

URLSearchParams

브라우저에 내장 되어 있는 객체이다

https://developer.mozilla.org/ko/docs/Web/API/URLSearchParams

export default function About(props) {
  const searchParams = props.location.search
  console.log(searchParams)
  const obj = new URLSearchParams(searchParams)
  console.log(obj)
  return (
    <div>
      <h2>About 페이지 입니다.</h2>
    </div>
  )
}

console.log(searchParams) -> 문자열로 ?name=mark 가 콘솔에 찍힌다
console.log(obj) -> 아무것도 보이지 않는다 추가적으로 처리를 해줘야 한다

export default function About(props) {
  const searchParams = props.location.search
  console.log(searchParams)
  const obj = new URLSearchParams(searchParams)
  console.log(obj.get('name'))
  const objName = obj.get('name')
  return (
    <div>
      <h2>About 페이지 입니다.</h2>
      {objName && <p>name은 {objName}입니다</p>}
    </div>
  )
}

문자열 mark가 찍힌다

쿼리로 받아온걸 출력 할 수 있다

URLSearchParams 의 단점
- URLSearchParams 의 메서드를 다 기억하고 사용해야 한다.
- 브라우저 객체이기 때문에 브라우저에 따라서 지원하지 않는 경우도 있다

query-string

URLSearchParams의 단점인 바로 키로 꺼내 사용 할 수 있도록 해준다

1	$ npm i query-string

// query-string을 import 해준다
import queryString from 'query-string'

export default function About(props) {
  const searchParams = props.location.search
  const query = queryString.parse(searchParams)
  // searchParams 문자열을 파싱 해준다

  return (
    <div>
      <h2>About 페이지 입니다.</h2>
      {query.name && <p>name은 {query.name}입니다.</p>}
    </div>
  )
}

{name:’mark’} 처럼 객체형식으로 잘 나온다

console.log(query)를 해보면 이상한 에러가 잔뜩 뜬다..
검색해봐도 무슨 말인지 잘 모르겠다