[TIL] 2023-02-20

웹 프로젝트 구현에서 페이지의 이동처럼 보이게 연출해주는데 큰 역할을 하는 리액트 라우터에 대해 공부함.(+사용자가 요청한 URL에 따라 알맞은 자원을 제공함), 리액트 라우터를 이해하기 위한 관련 개념들도 함께 학습

• URL - 인터넷에서 자원의 위치를 의미

  • 자원 - HTML, CSS, 이미지 등 웹 브라우저가 이해할 수 있는 모든 형태의 데이터

  • URL은 웹 브라우저가 특정 웹 서버에 원하는 자원을 요청할 때 사용

    http://localhost:3000/a/b/c/?d=10&e=hello#fgh
    프로토콜-도메인-포트-경로-쿼리매개변수-프레그먼트

  • location 객체(각종 요소 문자열) - 속성: href, protocol, host, pathname, search, hash

  • history 객체(페이지 이동) - 메서드: back(), forward(), go(숫자 or URL)

  • 라우팅 - 웹 서버에서 URL에 명시된 자원을 찾는 과정

• 리액트 라우터 패키지 - 기본 설정 방법 및 여러 훅들을 학습

  import {BrowserRouter} from 'react-router-dom'
  
  export default function App() {
  return (
    <BrowserRouter>
    /* 리액트 라우터 기능 사용 컴포넌트 */
    </BrowserRouter>
    )
  }

  • Routes, Route, Link 컴포넌트

    import {Routes, Route} from 'react-router-dom'
    import Home from './Home'
    import Example from './Example'
    import Nopage from './Nopage'
    
    export default function RoutesSetup(){
    return (
      	<Routes>
        	<Route path="/" element={<Home />} />
        	<Route path="/example" element={<Example />} />
        	<Route path="*" element={<Nopage />} />
      	</Routes>
      )
    }

    <Link to ="/">Home</Link>

  • useNavigate, useLocation, useParams, useSearchParams 훅

    const navigate = useNavigate()
    const location = useLocation()
    const [searchParams, setSearchParams] = useSearchParams()
    
    navigate('/')
    navigate(-1)
    
    // 쿼리 매개변수 '?example=100'
    const example = searchParams.get('example')

    
    

  • Outlet 컴포넌트
    - 라우트를 중첩하여 내비게이션 메뉴나 바닥글처럼 컴포넌트마다 공통으로 사용하는 부분의 코드를 줄여줍니다.

    다른 컴포넌트들이 렌더링되는 위치를 지정해 주는 역할

    import {Routes, Route} from "react-router-dom"
    import Layout from "./Layout"
    import LandingPage from "./LandingPage"
    import Board from "../pages/Board"
    import NoMatch from "./NoMatch"
    
    export default function RoutesSetup() {
      return (
        <Routes>
          <Route path="/" element={<Layout />}>
            <Route index element={<LandingPage />} />
            <Route path="/board" element={<Board />} />
            <Route path="*" element={<NoMatch />} />
          </Route>
        </Routes>
      )
    }

    import {Outlet} from "react-router-dom"
    import NavigationBar from "./NavigationBar"
    import Footer from "./Footer"
    
    export default function Layout() {
    return (
      <>
        <NavigationBar />
        <Outlet />
        <Footer />
      </>
    )
    }

(프로젝트를 진행할 때, 레이아웃 구성을 위해 공통 컴포넌트를 만들었는데, Outlet 컴포넌트의 존재를 몰랐다. 코드 리팩토링을 할 때 한 번 활용해봐야겠다.)