안녕하세요. 오늘은 리액트의 라우터와 Link 기능을 활용해 페이지 전환을 해보도록 하겠습니다.
먼저 리액트가 설치됐다는 가정하에 npm install react-router-dom 을 입력해 react-router-dom을 설치해줍니다.
이제는 src폴더 안에 있는 index.js 파일을 열어주고 BrowserRouter를 사용해 봅시다.
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<BrowserRouter>
<App />
</BrowserRouter>
);
reportWebVitals();
그리고 나서 App.js 파일에서 화면 이동 기능을 구현해보겠습니다.
import './App.css';
import {Route, Routes,Link} from 'react-router-dom';
import Home from './pages/Home/Home';
import MyPage from './pages/MyPage/MyPage';
function App() {
return (
<div className="App">
<header className="App-header">
<p>카테고리</p>
<p><Link to="/">홈으로</Link></p>
<p><Link to="/MyPage">마이페이지</Link></p>
</header>
<body>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/MyPage" element={<MyPage />} />
</Routes>
</body>
</div>
);
}
export default App;
코드는 위와 같고 이동할 페이지인 Home과 MyPage를 만들어야 하는데 먼저 src에 pages라는 폴더를 만들고 그 안에 Home과 MyPage 폴더를 만듭니다. 각 폴더 안에는 Home.js, MyPage.js를 생성하시면 됩니다.
각 페이지 코드 입니다.
import React from 'react';
const Home = () => {
return (
<div>
홈입니다
</div>
);
};
export default Home;
import React from 'react';
const MyPage = () => {
return (
<div>
마이페이지입니다
</div>
);
};
export default MyPage;
먼저 기본 / 경로입니다.
여기서 마이페이지를 클릭하면 아래와 같은 결과가 나옵니다.
이상으로 리액트의 Link 기능을 사용해보았습니다.
'React' 카테고리의 다른 글
| [React] JSX안에서 조건문 사용하기 (0) | 2023.10.10 |
|---|---|
| [React] useState와 useEffect 사용하기 (0) | 2023.09.20 |
| [React]컴포넌트 생성 및 재사용하기 (0) | 2023.07.20 |
| [React] video 태그(동영상) 관련 함수 활용 (0) | 2023.03.05 |
| [React] 영상 썸네일 만들기 (0) | 2023.02.10 |
