Written by Parkdev
on January 19, 2024

title

라우팅을 들어가기진 리엑트의 특성을 알아보자

React를 사용하지 않은 일반적인 html은 url에 해당하는 html페이지를 그대로 불러온다.
그러나 리엑트는 index.html만 사용한다.
- detail 페이지를 component로 만들어놓고 페이지를 부르면
- index.html페이지를 비우고 컴포넌트를 보여준다.
- 이를 일일히 구현하면 시간이 많이걸리지만 이를 도와주는 라이브러리가 있다.
- react-router-dom

React-router-dom 설치방법

라이브러리 설치

npm install react-router-dom@6 # @뒤에 숫자로 버전을 지정해서 설치가가능하다

index.js에설정

import { BrowserRouter } from 'react-router-dom'; //BrowserRouter을 추가하면 자동으로 import된다.

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter> // BrowerRouter
   	 <App />	
    </BrowserRouter> //BrowserRouter닫기로 App을 감싸주면된다.
  </React.StrictMode>
);

App.js 설정

import {Routes, Route, Link} from 'react-router-dom'

function App() {
    ...
    return (
    ...
        {/* Route추가하기 */}
      <Routes>
        <Route/> //사용할 페이지 수만큼 <Route/> 추가
        <Route path="/detail" element={<div>상세페이지임</div>}/> // url과 보여줄 값 추가
      </Routes>
    ...
    )
}

페이지도 컴포넌트로 만들어두어서 Router로 연결만하면 깔끔한 페이지 완성이 가능하다
- 특히 새로운 Js파일로 분리하면 더더욱 깔끔한 페이지 완성이 가능하다

페이지 이동은 로 가능하다

  <Link to="/">홈</Link>
  <Link to="/detail">상세페이지</Link>

는 a태그처럼 작동되며 이를 더 쉽게 할 수 있는 함수가 useNaviage();이다.

  // 페이지 이동을 도와주는 훅
  // 함수가 들어가있어 별도의 변수에 저장해서 쓰는게 일반적
  let navigate = useNavigate();
	...
  <Nav.Link onClick={()=>{ navigate('/')}}>Home</Nav.Link>
  <Nav.Link onClick={()=>{ navigate('/detail')}}>Detail</Nav.Link>

navigate라는 변수에 넣은이후 사용
- 특수기능이 있다.
  - navigate(1): 앞으로가기
  - navigate(-1): 이전 페이지로 이동 (뒤로가기)
  - 숫자 만큼 이동한다
404페이지 만들기

 <Route path="*" element={<div>404페이지에요</div>}/>

더 깊게가려면 nested route를 사용

<Route path="/about" element={<About />}>
  <Route path="member" element={<div>맴버페이지</div>} />
  <Route path="location" element={<About />} />
</Route>

이때 부모 Route 와같이 nested Route 내용을 같이 보여주고싶으면 부모 Route 내용에 표시해줘야한다.
이때사용하는게
- 이걸 사용하지 않으면 자식의 내용은 보이지 않는다.

function About() {
  return (
    <div>
      <h4>회사정보임</h4>
      <Outlet/> //이쪽에 자식 Route의 내용이 보여진다.
    </div>
  )
}

Outlet의 장점
- 유사한페이지를 만들때 중복되는 코드를 줄일 수 있다.
  - 모달창 탭기능등
- 뒤로가기 버튼을 사용이 가능하다.
- 페이지 이동도 쉽게 할 수 있다.

← → Top