[React] 리액트 공부 내용 정리 (Route)

글 작성 페이지, 글을 확인할 수 있는 페이지, 홈 페이지를 분리하는 부분을 구현했다. 

(지금 생각해보니 홈 페이지에서 글을 확인할 수 있도록 할 거라 따로 홈 페이지는 필요 없을 것 같다.) 

 

리액트에서는 페이지를 이동할 때 a 태그를 사용하지 않는다.

리액트는 Single Page Application (SPA)라는 특징을 가지고 있는데 이는 페이지가 하나인 어플리케이션이란 의미이다. 

따라서 페이지 이동은 불가능하고 주솟값에 따른 화면을 만들어 보여준다.

이때 주소마다 다른 화면을 보여주는 것을 라우팅(routing)이라 한다. 

 

✅우선 Route를 시용하기 위해 npm install react-router-dom 을 해준다. (알아서 잘 설치될 것)

npm install react-router-dom

 

✅ 다음으로 index.js 파일에 App 컴포넌트를 BrowserRouter 컴포넌트로 감싸준다. 

// index.js

import { BrowserRouter } from 'react-router-dom';

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

 

✅ App.js 파일에 import

// App.js

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

  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/create" element={<Create />} />
      <Route path="/post" element={<Post />} />
    </Routes>
  );

 ◼ 여기서 Routes 컴포넌트는 Route 컴포넌트를 묶어주고, Route 컴포넌트는 링크를 생성한다. 

 

✅ 페이지 이동 버튼이 있는 컴포넌트로 가서 연결해준다. (나의 경우 Content.js 파일에 가서 연결해 주었다)

// Content.js

import { Link } from 'react-router-dom';

            <Link to="/create" className={styles.link}>작성
            </Link>

 ◼  화면에 나타난 작성 버튼을 누르면 url + /create 페이지로 이동한다.