생활코딩: React-Router-DOM 실습

 

1. react-router-dom 설치

$npm install react-router-dom

 

 

 

 

 

2. index.js 작성(내가 수정한 버전. var를 const 또는 let으로 변경)

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter, Route, Routes, HashRouter, Link, NavLink, useParams } from 'react-router-dom';

function Home() {
  return (
    <div>
      <h2>Home</h2>
      Home...
    </div>
  );
}

// 원래는 ajax나 axios로 가져왔을 배열
const contents = [
  {id:1, title:'HTML', description: 'HTML is...'},
  {id:2, title:'JS', description: 'JS is...'},
  {id:3, title:'React', description: 'React is...'},
]

function Topic(){
  const params = useParams();
  const topic_id = params.topic_id;
  let selected_topic={
    title:'sorry',
    description:'Not Found'
  };
  for(let i=0; i<contents.length; i++){
    if(contents[i].id === Number(topic_id)) {
      selected_topic = contents[i];
      break;
    }
  }

  console.log('#useParams', params)

  return (
    <div>
      <h3>{selected_topic.title}</h3>
      {selected_topic.description}
    </div>
  );
}

function Topics() {

  const lis =[];
  for(let i=0; i< contents.length; i++){
    lis.push(
      <li key={contents[i].id}><NavLink to={"/topics/" + contents[i].id}>
        {contents[i].title}
        </NavLink>
      </li>
    )
  }

  return (
    <div>
      <h2>Topics</h2>
      <ul>
        {lis}
      </ul>

      <Routes>
        <Route path="/:topic_id" element={<Topic />}></Route>
        {/* topic_id가 <Topic>으로 전달된다. <Topic>에서는 이를 useParams()를 사용해서 받는다.  */}
      </Routes>
    </div>
  );
}

function Contact() {
  return (
    <div>
      <h2>Contact</h2>
      Contact...
    </div>
  )
}


function App() {
  return(
    <div>
      <h1>Hello React Router DOM</h1>
      <ul>
        {/* <li><a href="/">Home</a></li>
        <li><a href="/topics">Topics</a></li>
        <li><a href="/contact">Contact</a></li> 
        */}
        
        {/* <li><Link to="/">Home</Link></li>
        <li><Link to="/topics">Topics</Link></li>
        <li><Link to="/contact">Contact</Link></li> */}

        {/* NavLink를 사용하면 해당 태그에 class="active" 라는 속성이 생긴다.
        이를 사용하여 사용자가 현재 자신이 어떤 페이지에 위치하는지를 직관적으로 알 수 있게 네비게이션에 위치를 표시해 줄 수 있다.
        index.css 참고 */}

        <li><NavLink to="/">Home</NavLink></li>
        <li><NavLink to="/topics">Topics</NavLink></li>
        <li><NavLink to="/contact">Contact</NavLink></li>
      </ul>

    <Routes>
      <Route path="/" element={<Home />}></Route>
      <Route path="/topics/*" element={<Topics />}></Route>
      <Route path="/contact" element={<Contact />}></Route>
      <Route path="/*" element={'Not Found'}></Route>
    </Routes>

    </div>
  );
}


ReactDOM.createRoot(document.getElementById('root')).render(<HashRouter><App /></HashRouter>);

/**
 http://localhost:3000/#/topics 처럼 표시된다.
 #가 붙어있으면 뒤의 내용은 북마크라는 뜻이다. 웹서버는 # 문자 뒷부분의 주소는 무시한다.
 하지만 자바스크립트를 이용해 #의 뒷부분의 내용을 알 수 있기 때문에 react-router-dom은 URL을 읽어서 적절한 컴포넌트로 라우팅해 줄 수 있다.

 웹서버 설정에 따라 어떤 패스로 들어오든 루트 페이지에 있는 HTML파일을 서비스 할 수 있다면 BrowserRouter를 사용하고,
 그렇지 않다면 HashRouter를 사용하면 된다.
 */
// ReactDOM.createRoot(document.getElementById('root')).render(<BrowserRouter><App /></BrowserRouter>);


// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

3. index.css 작성

.active{
  background-color: tomato;
  text-decoration: none;
}

 

4. index.js (책에 나와 있는 버전)

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter, Route, Routes, HashRouter, Link, NavLink, useParams } from 'react-router-dom';

function Home() {
  return (
    <div>
      <h2>Home</h2>
      Home...
    </div>
  );
}

// 원래는 ajax나 axios로 가져왔을 배열
var contents = [
  {id:1, title:'HTML', description: 'HTML is...'},
  {id:2, title:'JS', description: 'JS is...'},
  {id:3, title:'React', description: 'React is...'},
]

function Topic(){
  var params = useParams();
  var topic_id = params.topic_id;
  var selected_topic={
    title:'sorry',
    description:'Not Found'
  };
  for(var i=0; i<contents.length; i++){
    if(contents[i].id === Number(topic_id)) {
      selected_topic = contents[i];
      break;
    }
  }

  console.log('#useParams', params)

  return (
    <div>
      <h3>{selected_topic.title}</h3>
      {selected_topic.description}
    </div>
  );
}

function Topics() {

  var lis =[];
  for(var i=0; i< contents.length; i++){
    lis.push(
      <li key={contents[i].id}><NavLink to={"/topics/" + contents[i].id}>
        {contents[i].title}
        </NavLink>
      </li>
    )
  }

  return (
    <div>
      <h2>Topics</h2>
      <ul>
        {lis}
      </ul>

      <Routes>
        <Route path="/:topic_id" element={<Topic />}></Route>
        {/* topic_id가 <Topic>으로 전달된다. <Topic>에서는 이를 useParams()를 사용해서 받는다.  */}
      </Routes>
    </div>
  );
}

function Contact() {
  return (
    <div>
      <h2>Contact</h2>
      Contact...
    </div>
  )
}


function App() {
  return(
    <div>
      <h1>Hello React Router DOM</h1>
      <ul>
        {/* <li><a href="/">Home</a></li>
        <li><a href="/topics">Topics</a></li>
        <li><a href="/contact">Contact</a></li> 
        */}
        
        {/* <li><Link to="/">Home</Link></li>
        <li><Link to="/topics">Topics</Link></li>
        <li><Link to="/contact">Contact</Link></li> */}

        {/* NavLink를 사용하면 해당 태그에 class="active" 라는 속성이 생긴다.
        이를 사용하여 사용자가 현재 자신이 어떤 페이지에 위치하는지를 직관적으로 알 수 있게 네비게이션에 위치를 표시해 줄 수 있다.
        index.css 참고 */}

        <li><NavLink to="/">Home</NavLink></li>
        <li><NavLink to="/topics">Topics</NavLink></li>
        <li><NavLink to="/contact">Contact</NavLink></li>
      </ul>

    <Routes>
      <Route path="/" element={<Home />}></Route>
      <Route path="/topics/*" element={<Topics />}></Route>
      <Route path="/contact" element={<Contact />}></Route>
      <Route path="/*" element={'Not Found'}></Route>
    </Routes>

    </div>
  );
}


ReactDOM.createRoot(document.getElementById('root')).render(<HashRouter><App /></HashRouter>);

/**
 http://localhost:3000/#/topics 처럼 표시된다.
 #가 붙어있으면 뒤의 내용은 북마크라는 뜻이다. 웹서버는 # 문자 뒷부분의 주소는 무시한다.
 하지만 자바스크립트를 이용해 #의 뒷부분의 내용을 알 수 있기 때문에 react-router-dom은 URL을 읽어서 적절한 컴포넌트로 라우팅해 줄 수 있다.

 웹서버 설정에 따라 어떤 패스로 들어오든 루트 페이지에 있는 HTML파일을 서비스 할 수 있다면 BrowserRouter를 사용하고,
 그렇지 않다면 HashRouter를 사용하면 된다.
 */
// ReactDOM.createRoot(document.getElementById('root')).render(<BrowserRouter><App /></BrowserRouter>);


// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();