๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
๐ŸŒŒ | WEB DEV/React

[React] 9. ๋ผ์šฐํŒ…-1 (react-router-dom์„ธํŒ…, Routes, Route, Link)

by KASSID 2023. 7. 9.

๋ชฉ์ฐจ

    728x90

    ์ด์ „ ๊ธ€ โ–ผ

    ๋”๋ณด๊ธฐ

     

     

    ์›น์‚ฌ์ดํŠธ๋ฅผ ์ œ์ž‘ํ•  ๋•Œ ํŽ˜์ด์ง€๋ฅผ ๋‚˜๋ˆ„๊ณ  ์‹ถ์€ ๊ฒฝ์šฐ 

    html ํŒŒ์ผ์„ ์ƒˆ๋กœ ํ•˜๋‚˜ ์ƒ์„ฑํ•œ๋‹ค๋ฉด ๊ทธ๊ฒƒ์ด ๋ฐ”๋กœ ์ƒˆ๋กœ์šด ํŽ˜์ด์ง€๊ฐ€ ๋˜๋Š” ๊ฒƒ์ด๋‹ค.

     

    ํ•˜์ง€๋งŒ React๋Š” ๋‹จ ํ•˜๋‚˜์˜ html ํŒŒ์ผ์ธ index.html ๋งŒ์„ ์‚ฌ์šฉํ•œ๋‹ค.

    ๋”ฐ๋ผ์„œ react-router-dom ์ด๋ผ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์ด์šฉํ•˜์—ฌ div ์•ˆ์˜ ๋‚ด์šฉ์„ ๋ฐ”๊พธ์–ด์ฃผ๋ฉฐ ํŽ˜์ด์ง€ ์ „ํ™˜์„ ๊ตฌํ˜„ํ•œ๋‹ค!

     

    ๋ฆฌ์•กํŠธ ๋ฆฌ์•กํŠธX
    ์ปดํฌ๋„ŒํŠธ ์ œ์ž‘
    ํ•ด๋‹น path์— ์ ‘์† ์š”์ฒญ ์‹œ ๊ทธ์— ๋งž๋Š” ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ณด์—ฌ์คŒ
    ์—ฌ๋Ÿฌ html ํŒŒ์ผ ์ƒ์„ฑ
    ํ•ด๋‹น path์— ์ ‘์† ์š”์ฒญ ์‹œ ๊ทธ์— ๋งž๋Š” html ํŒŒ์ผ ์†ก์‹ 

     

     

    1. react-router-dom ์„ธํŒ…ํ•˜๊ธฐ

    ๋จผ์ € react-router-dom์„ ์„ค์น˜ํ•œ๋‹ค.

    npm install react-router-dom@6

     

    ์ดํ›„ index.js์—์„œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ importํ•œ ๋’ค

    <App/> ํƒœ๊ทธ๋ฅผ <BrowserRouter>ํƒœ๊ทธ๋กœ ๊ฐ์‹ธ์ค€๋‹ค.

    //index.js
    
    import { BrowserRouter } from "react-router-dom";
    
    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(
      <React.StrictMode>
        <BrowserRouter>
          <App />
        </BrowserRouter>
      </React.StrictMode>
    );

     

     

    2. ๋ผ์šฐํŒ…

    url๋งˆ๋‹ค ๋‹ค๋ฅธ ํŽ˜์ด์ง€๋ฅผ ๋ณด์—ฌ์ฃผ๊ณ  ์‹ถ์€ ๊ฒฝ์šฐ ์•„๋ž˜์™€ ๊ฐ™์ด ๊ตฌํ˜„ํ•œ๋‹ค.

     

    // App.js
    
    import { Routes, Route, Link } from 'react-router-dom'
    
    function App(){
      return(
        ...
        
        <Routes>
          <Route path="/๊ฒฝ๋กœ1" element={ <div> ... </div> } />
          <Route path="/๊ฒฝ๋กœ2" element={ <div> ... </div> } />
        </Routes>
        
      )
    }

     

    - Routes : ํŽ˜์ด์ง€ ์ปจํ…Œ์ด๋„ˆ

    - Route : ๊ฐ ํŽ˜์ด์ง€๋“ค

     

    ์œ„์—์„œ ์„ค์ •ํ•œ ๊ฒฝ๋กœ์— ์ ‘์†ํ•  ๊ฒฝ์šฐ html์˜ ํ•ด๋‹น ์œ„์น˜์— ์š”์†Œ๊ฐ€ ๋ณด์ด๊ฒŒ ๋œ๋‹ค.

     

    Routes ์™ธ์˜ ํƒœ๊ทธ๋“ค์€ ํŽ˜์ด์ง€์™€ ์ƒ๊ด€์—†์ด ํ•ญ์ƒ ํ™”๋ฉด์— ๋ณด์ธ๋‹ค!

     

     

    ์˜ˆ์‹œ

    //App.js
    <Navbar variant="dark" className='nav-container'>
      <Container className='navbar'>
        <Navbar.Brand href="#home">RED WAVE</Navbar.Brand>
        <Nav className="me-auto">
          <Nav.Link href="#home">Home</Nav.Link>
          <Nav.Link href="#cart">Cart</Nav.Link>
        </Nav>
      </Container>
    </Navbar>
    
    <Routes>
      <Route path='/' element={
        <>
          <div className="main-bg"></div>
          <div className="item-container">
            {
              data.map(function(a,i) {
                return(<Item data={data} i={i} />)
              })
            }
          </div>
        </>
      }></Route>
      <Route path='/detail'></Route>
    </Routes>

     

    1) ๋ฉ”์ธ ํŽ˜์ด์ง€

     

    2) /detail

     

    ์œ„์ฒ˜๋Ÿผ Routes ์•ˆ์— ๋“ค์–ด์žˆ์ง€ ์•Š์€ navbar๋Š” ํŽ˜์ด์ง€์— ์ƒ๊ด€์—†์ด ์กด์žฌํ•˜์ง€๋งŒ

    ๋‚ด๋ถ€์— ์กด์žฌํ•˜๋Š” ์š”์†Œ๋“ค์€ path์— ๋”ฐ๋ผ ์ „ํ™˜์ด ๋˜๋Š” ๊ฒƒ์„ ์•Œ ์ˆ˜ ์žˆ๋‹ค.

     

     

    3. ํŽ˜์ด์ง€ ์ „ํ™˜

    ํŽ˜์ด์ง€ ์ „ํ™˜์€ <Link/> ํƒœ๊ทธ๋กœ ๊ตฌํ˜„ํ•œ๋‹ค.

    to=๊ฒฝ๋กœ ๋ฅผ ํ†ตํ•ด ์„ค์ •ํ•œ path๋กœ ์ ‘์†ํ•˜๋„๋ก ํ•œ๋‹ค.

     

    <Link to="/๊ฒฝ๋กœ1"> ... </Link>
    <Link to="/๊ฒฝ๋กœ2"> ... </Link>

     

     

    ์˜ˆ์‹œ

    //App.js
    <Link to="/">ํ™ˆ</Link>
    <Link to="/detail">์ƒ์„ธํŽ˜์ด์ง€</Link>

     

     

    Linkํƒœ๊ทธ๋Š” ์‹ค์ œ๋กœ aํƒœ๊ทธ๋กœ ์ ์šฉ์ด ๋œ๋‹ค.

     

    ๋Œ“๊ธ€