React Ch 4. React Router (1) ~ (4)

01. React의 라우팅 이해하기

(1) SPA(Single Page Application) 라우팅 과정

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

=> 서버로부터 각각의 페이지를 요청하는 것과 다름

(2) react-router-dom

npm i react-router-dom

• cra에 기본 내장된 패키지는 아님
• react-router-dom은 Facebook의 공식 패키지는 아님
• 가장 대표적인 라우팅 패키지

(3) 페이지 그리기

• pages/home.jsx

export default function Home() {
  return <div>Home 페이지입니다.</div>;
}

• app.js

function App() {
  return (
    <BrowserRouter>
      <Route path="/" exact component={Home} />
    </BrowserRouter>
  );
}

• 설명
  • BrowserRouter, Route: react 라우터에서 바로 사용 가능한 컴포넌트
  • exact: 절대적인 경로 명시

02. Dynamic 라우팅 - (I)

동적 라우팅: id 받기

/profile 뒤에 id를 받으면 새로운 페이지를 만들고 싶은 상황

• app.js

function App() {
  return (
    <BrowserRouter>
      <Route path="/profile" exact component={Profile} />
      <Route path="/profile/:id" component={Profile} />
    </BrowserRouter>
  );
}

=> /profile에는 exact를 사용해서 절대 경로 명시
=> path가 /profile/:id인 새로운 Route 컴포넌트를 만들어 id를 받아올 수 있게 함
(id 이름은 개발자가 맘대로 변경 가능, 값은 사용자에게 받음)

• pages/Profile.jsx

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

=> 컴포넌트 함수 인자에 props를 적음
=> 사용자가 id를 주소에 적으면 페이지 이동

03. Dynamic 라우팅 (II)

동적 라우팅: ?name=mark 형식 사용

주소 뒤에 사용자가 ?name-mark 같은 형식으로 적으면 데이터를 받아오고 싶은 상황

=> ? 처리를 사용한다는 것은 있어도 없어도 상관이 없다는 뜻이며 추가적으로 라우팅 처리를 하지 않아도 된다는 것(옵션 형식)
=> id를 받아올 때와 가장 큰 차이점

방법1

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

• pages/About.jsx

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

• 단점
  • 브라우저 내장 객체기 때문에 브라우저에 따라 사용이 불가할 수도 있음
  • 메서드를 모두 기억해야하는 불편함

=> 해결방법
npm i query-string -S

방법2

npm i query-string -S를 사용한 방법

• pages/About.jsx

import queryString from "query-string";

export default function About(props) {
  const seachParams = props.location.search;
  console.log(seachParams);
  const query = queryString.parse(seachParams);
  console.log(query);
  return (
    <div>
      <h2>About 페이지입니다.</h2>
      {query.name && <p>name은 {query.name}입니다.</p>}
    </div>
  );
}

04. Switch 와 NotFound

• 여러 Route 중 순서대로 먼저 맞는 하나만 보여줌
• exact를 뺼 수 있는 로직을 만들 수 있음
• 가장 마지막에 어디 path에도 맞지 않으면 보여지는 컴포넌트를 설정해서 "Not Found" 페이지를 만들 수 있음

• app.js

import NotFound from "./pages/NotFound";

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

=> exact를 쓰지 않아도 전처럼 동작함
=> 그러나 마지막에는 exact 적어야 함!

• pages/NotFound.jsx

export default function NotFound() {
  return <div>페이지를 찾을 수 없습니다.</div>;
}