[React] React Router 사용하기

서론

저번 내용보단 쉬웠지만, 내가 공부중인 책과 현재 React Router v6이차이가 있어서 구글링하면서 공부해야했다.

생활코딩 아주조코.. ㅎ

 

Routing이란??

사용자가 접속 중인 URL에 따라 UI를 달라지게 하는 것이다.

매우 유용하게 쓰인다고 한다.

 

React Router를 써보자!

일단 새로운 프로젝트를 만들고, index.css의 내용을 모두 지운다.

모든 코드는 index.js에서 구현될 예정이므로 주의할 것!

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

먼저 Router를 import해준다. 원래 React router는 그냥 써도 됐는데, router v6이 되면서 routes를 꼭 쓸 수 밖에 없어졌다. 이건 나중에 코드로 봅세.

 

그리고 index.js의 코드를 살짝 수정해보자.

모든 코드를 지우고 (import 제외 but import App은 삭제 ㄱ)

ReactDOM.render(<React.StrictMode><BrowserRouter><App /></BrowserRouter></React.StrictMode>, document.getElementById('root'));

reportWebVitals();

이걸 추가해보자.

React.StrictMode는 오류가 신경 쓰이지 않는다면 굳이 없어도 된다.

라우팅을 할 때는 App 컴포넌트를 BrowserRouter로 감싸줘야한다.

BrowserRouter 말고도 HashRouter도 있는데, 코드를 작성하고 설명해보겠다.

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

var contents = [
  {id:1, title:'HTML', desc:'HTML is...'},
  {id:2, title:'JS', desc:'JS is...'},
  {id:3, title:'React', desc:'React is...'}
]

function Topics() {
  var lsts = [];
  for(var i = 0; i < contents.length; i++) {
    lsts.push(
      <li key={contents[i].id}><NavLink to={"/topics/" + contents[i].id}>{contents[i].title}</NavLink></li>
    );
  }
  return (
    <div>
      <h2>Topics</h2>
      <ul>
        {lsts}
      </ul>
    </div>
  )
}

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

function App() {
  return (
    <div>
      <h1>Hello React Router DOM</h1>
      <ul>
        <li><NavLink to='/'>Home</NavLink></li>
        <li><NavLink to='/topics/'>Topics</NavLink></li>
        <li><NavLink to='/contact'>Contact</NavLink></li>
      </ul>
      <Routes>
        <Route exact={true} path="/" element={<Home />}></Route>
        <Route path="/topics/*" element={<Topics />}></Route>
        <Route path="/contact" element={<Contact />}></Route>
      </Routes>
    </div>
  );
}

Home, Topic, Contact, App 컴포넌트를 생성해주고 위와 같이 코드를 적어준다.

App 컴포넌트를 보자.

NavLink 라는 게 있는데, 이것은 html의 a와 비슷하다. 하지만 a는 누르면 페이지가 리로드되는데,

NavLink를 사용하면 리로드가 없어진다. 또, NavLink와 Link가 있는데 둘 다 UI는 같다.

하지만 NavLink를 사용하면 클릭된 li의 class에 active가 추가된다. CSS로 응용해서 사용할 수 있다.

.active {
	color:blue;
 }

이렇게!

 

<Routes>
  <Route exact={true} path="/" element={<Home />}></Route>
  <Route path="/topics/*" element={<Topics />}></Route>
  <Route path="/contact" element={<Contact />}></Route>
</Routes>

이제 routing을 해보자.

세 개의 Route가 있는데, 먼저 이 Route들을 Routes로 감싸줘야 한다. (v6부터 이렇게 됨...)

그리고 url의 주소가 path="주소"일 때 element를 UI로 보여준다.

element도 v6이 되면서 바뀌게 된 것이다 ㅎㅎ...

 

Topic.js를 봐보자.

var contents = [
  {id:1, title:'HTML', desc:'HTML is...'},
  {id:2, title:'JS', desc:'JS is...'},
  {id:3, title:'React', desc:'React is...'}
]

function Topics() {
  var lsts = [];
  for(var i = 0; i < contents.length; i++) {
    lsts.push(
      <li key={contents[i].id}><NavLink to={"/topics/" + contents[i].id}>{contents[i].title}</NavLink></li>
    );
  }
  return (
    <div>
      <h2>Topics</h2>
      <ul>
        {lsts}
      </ul>
    </div>
  )
}

일단 contents라는 배열을 만든다.

그리고 CRUD할 때랑 똑같이 lst라는 배열을 만들고 <li> 태그를 삽입한다.

NavLink를 쓰는데, /topics/id값 이렇게 넣어준다.

예를 들어, HTML 이라는 NavLink를 누르면 /topics/1로 이동한다.

 

담소

오늘 공부한 내용은 많이 적어보이지만 실제로 책과 라우터 버전이 달라서 구글링한다고 시간을 많이 허비했다.

목차를 보니 이제 Ajax를 배울 거 같다. 타입스크립트도 올릴 예정 많관부!