하.. 언제쯤 리액트가 이해가 될까...
순서순서
day07프로젝트 만들기
src 밑에
page01 폴더 만들기 --> 기존 component 폴더를 만든 것과 같음
흔히 말하는 페이지 이동 기능을 리액트에서는 "리액트 라우터" 를 통해 처리해보고자 한다.
1. 라우팅이란?
- 간단하게 생각 하자면 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것이라고 생각할 수 있다.
- 리액트에서는 라우팅 관련 라이브러리가 많이 있는데, 이중 가장 많이 쓰이는 리액트 라우터(React Router)를 사용해보려 한다.
리액트는 SPA (Single Page Application) 방식
- 기존 웹 페이지 처럼(MPA 방식) 여러개의 페이지를 사용, 새로운 페이지를 로드하는 방식이 아니다.
- 새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 데이터만 가져오는 형태를 가진다.
2. 리액트 라우터(React Router)
- 사용자가 입력한 주소를 감지하는 역할을 하며, 여러 환경에서 동작할 수 있도록 여러 종유의 라우터 컴포넌트를 제공한다.
- 이중 가장 많이 사용하는 라우터 컴포넌트는 BrowserRouter와 HashRouter이다.
종류는 BrowserRouter : HTML5를 지원하는 브라우저의 주소를 감지한다.
설치
- npm
npm install react-router-dom
- yarn
yarn add react-router-dom
# react-router-dom 변경사항 (2021. 11. 25 기준)
1. Route 컴포넌트를 이제는 Routes 컴포넌트로 필히 감싸주어야 한다.
2. Route 컴포넌트의 매개변수 compent 가 element 로 바뀌었다.
3. useHistory 사라짐 -> useNavigate 함수
4. history.push('/') -> navigate('/')
Route : 어떤 경로로 들어왔을 때 어떤 컴포넌트를 보여 주겠다
Link : Router의 주소를 바꿈, a 태그지만 새로 고침이 안 된다.
:style 를 route path에 사용하면 useParams() 로 불러와 사용할 수 있다.
: 뒤에 나오는 부분이 params의 key 부분이 되어 :name 는 name가 key가 되어 불러오고 있다.
-실습예제 01-
기존에는 app.js 에서 페이지를 불러와서 바로 했지만
이제는 app01.js를 따로 만들어서 app.js에 import하는 방식으로 함.
여튼 App01.js가 메인화면 역할을 한다고 생각하면 됨
import React from 'react';
import { BrowserRouter, Link, Route, Routes } from 'react-router-dom';
import Home from './page01/Home';
import About from './page01/About';
import Ceo from './page01/Ceo';
import Sub01 from './page01/Sub01';
import NotFiles from './page01/NotFiles';
const App01 = () => {
return (
<BrowserRouter>
<>
<nav>
<ul>
{/* <a href ="" ></a> 를 대신해서 <Link />를 쓴다.
만약 <a href ="" ></a>를 쓰면... 로딩하느라 빙글빙글 돈다. */}
<li><Link to='/'>Home</Link></li>
<li><Link to='/about'>About</Link></li>
<li><Link to='/ceo'> Ceo</Link></li>
<li><Link to='/sub01'>Sub01</Link></li>
</ul>
</nav>
{/* 화면에 보이는 영역 */}
<Routes>
<Route path='/' element={ <Home/> } />
<Route path='/about' element={ <About/>} />
<Route path='/ceo' element={ <Ceo/>} />
<Route path='/sub01' element={ <Sub01/> }/>
<Route path='*' element={ <NotFiles /> }/>
</Routes>
</>
</BrowserRouter>
);
};
export default App01;
//이게 메인 화면 역할을 하는 것
/*회원가입 로그인 역할을 하게 되는게 nav임
각각의 주소의 값이 <Route path='/'> 주소가 /이면 element={ <Home /> }로 homepage를 불러들이는것
하지만 모든 주소값을 치면서 들어갈 수 없으니 nav를 통해 a 태그 링크 이동을 만들어준다 <a href="/">Home</a> 을 한 것과 nav에 쓴 것과 같은 의미이다
<Route path='*' element={ <NotFiles /> }/> 이러는 위에 주소창에 엉뚱한 주소를 넣었을 떄 notfiles라고 뜨게 하는것
*/
About.js
import React from 'react';
const About = () => {
return (
<div>
<h1>About </h1>
</div>
);
};
export default About;
Home.js
import React from 'react';
const Home = () => {
return (
<div>
<h1>Home Page</h1>
</div>
);
};
export default Home;
Ceo.js
import React from 'react';
const Ceo = () => {
return (
<div>
<h1>Ceo</h1>
</div>
);
};
export default Ceo;
Sub01.js
import React from 'react';
const Sub01 = () => {
return (
<div>
<h1>Sub01</h1>
</div>
);
};
export default Sub01;
다 이런식으로 만듬
여기서 NotFiles 는 주소가 다른데!!
<Route path='*' element={ <NotFiles /> }/>
이렇게 path에 *이 되어있다. 그래서 주소 창에 엉뚱한 주소를 넣으면 NotFiles라고 뜨게 되는 것.
-실습예제 02 - App02.js