![](https://blog.kakaocdn.net/dn/trrHt/btscfCnG8rd/mj2gNibC1tUQc05hquffFk/img.png)
![](https://t1.daumcdn.net/keditor/emoticon/face/large/055.png)
git 수업이 지나고 다시 돌아온 리액트 관련 수업...
잘 기록하고, 나중에 까먹을 때 다시 와야지 ㅠ
1. react-touter-dom?
리액트에서 화면 전환을 하기 위한 라이브러리이다.
2. react-touter-dom 설치
[설치]
npm install react-router-dom@5.2.0
옛날 강의들은 대부분 5버전을 쓴다. 최신버전은 안되는 기능들이 있기 때문에 혼란을 막고자 해당 버전을 쓴다.
나는 성격이 급해서 바로 깔아가지고, 최신버전을 설치했었는데, 그럴 경우는 지우고 다시 깔면 된다.
[삭제]
npm uninstall router-react-dom
![](https://blog.kakaocdn.net/dn/bOmhFM/btscoFqIu8y/99FbJK9tkWVnY4GExO8kgK/img.png)
5.2버전 설치완료된 모습이다. packge.json에서 확인할 수 있다.
3. react-touter-dom > BrowserRouter 불러오기
[index.js]
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(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);
// 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();
index.js는 리액트가 처음 시작될 때 가장 먼저 시작한다. import를 이용해 라이브러리, 모듈을 다운받을 수 있기 때문에 import를 통해 브라우저 라우터를 불러오고, App을 감싸준다. 부모 컴포넌트가 되는 것이다.
App은 자식 컴포넌트로서 자유롭게 페이지 이동이 가능해진다.
![](https://blog.kakaocdn.net/dn/sI4jE/btscyZ885NN/CIZdNfUyWlQL96HvGcgiB0/img.png)
실행을 해보면, hihi라는 아직 없는 경로를 검색해도, 똑같은 메인페이지가 나오는 것을 확인할 수 있다.
4. react-touter-dom 적용하기
[App.js]
import './App.css';
//index.js 생략 가능
import MainPageCompnent from "./main/index.js"
import {Switch, Route} from 'react-router-dom';
function App() {
return (
<div>
<Switch>
<Route path={"/"}>
<MainPageCompnent></MainPageCompnent>
</Route>
</Switch>
</div>
);
}
export default App;
리액트 라우터 돔을 app.js에서도 import 해준다. 그 중 Switch와 Route를 가져온다.
App() 함수의 리턴 값으로 1개만 출력할 수 있기 때문에 <div>로 감싸주고, 경로 변화가 필요한 부분에 <Switch> 태그로 감싸준다. Route 태그로 path 경로를 정해준다.
이 때 참고로 말하자면, <MainPageComponent>는 위에 import에서도 볼 수 있듯이 main/index.js 경로에 우리가 만들어준 메인페이지를 담고 있다.
![](https://blog.kakaocdn.net/dn/DC3aC/btscmL5F61E/eTvok8J1bSU2sRiGJn8hgk/img.png)
새로운 페이지를 2개 더 만들어 보겠다. 상품관리 관련 페이지를 관리하는 product 폴더 아래 index.js 파일을 만들었고, 업로드 관리 관련 페이지를 관리하는 upload 폴더 아래 index.js 파일을 만들었다.
[App.js]
import './App.css';
//index.js 생략 가능
import MainPageCompnent from "./main/index.js"
import {Switch, Route} from 'react-router-dom';
import UploadPage from './upload';
import ProductPage from './product';
function App() {
return (
<div>
<Switch>
<Route exact={true} path={"/"}>
<MainPageCompnent></MainPageCompnent>
</Route>
</Switch>
<Switch>
<Route exact={true} path={"/product"}>
<ProductPage></ProductPage>
</Route>
</Switch>
<Switch>
<Route exact={true} path={"/upload"}>
<UploadPage></UploadPage>
</Route>
</Switch>
</div>
);
}
export default App;
그리고 새롭게 만든 2개의 파일을 import해주고, 따로 경로를 만들어 주었다. 해당 경로로 갔을 때 보일 페이지를 <함수></함수>로 표시해준다.
![](https://blog.kakaocdn.net/dn/bh9qty/btscwoaN8op/PwluOmqKs6lvC7hYWKBnV0/img.png)
![](https://blog.kakaocdn.net/dn/cIk4Dx/btscmLkgt7M/RvWnKYU0bXz22Kf3q8orfK/img.png)
그러면 이렇게 페이지별로 주소가 맵핑되는 것을 확인할 수 있다.
출처 :
비전공자를 위한 진짜 입문 올인원 개발 부트캠프 - 인프런 | 강의
왕초보도 할 수 있는 웹, 서버, 모바일 앱, 머신러닝까지 익히는 끝판왕 풀스택 강의!! 개발을 어디서부터 시작할지 막막했다면 이 강의를 강력 추천할게요. Javascript 하나로 진행합니다!, - 강의
www.inflearn.com
'FE > React' 카테고리의 다른 글
[React] 상품 상세페이지 만들기2 : postman id 설정 (0) | 2023.05.02 |
---|---|
[React] 상품 상세페이지 만들기 : 어떻게 여러 페이지를 한 번에 구분할 수 있을까? (0) | 2023.04.27 |
[React] axios 통신으로 상품 정보 가져오기 (0) | 2023.04.20 |
[React] jsx / Props / state (2) | 2023.04.20 |
[React] React 프로젝트/컴포넌트 구조 (0) | 2023.04.18 |
![](https://blog.kakaocdn.net/dn/trrHt/btscfCnG8rd/mj2gNibC1tUQc05hquffFk/img.png)
![](https://t1.daumcdn.net/keditor/emoticon/face/large/055.png)
git 수업이 지나고 다시 돌아온 리액트 관련 수업...
잘 기록하고, 나중에 까먹을 때 다시 와야지 ㅠ
1. react-touter-dom?
리액트에서 화면 전환을 하기 위한 라이브러리이다.
2. react-touter-dom 설치
[설치]
npm install react-router-dom@5.2.0
옛날 강의들은 대부분 5버전을 쓴다. 최신버전은 안되는 기능들이 있기 때문에 혼란을 막고자 해당 버전을 쓴다.
나는 성격이 급해서 바로 깔아가지고, 최신버전을 설치했었는데, 그럴 경우는 지우고 다시 깔면 된다.
[삭제]
npm uninstall router-react-dom
![](https://blog.kakaocdn.net/dn/bOmhFM/btscoFqIu8y/99FbJK9tkWVnY4GExO8kgK/img.png)
5.2버전 설치완료된 모습이다. packge.json에서 확인할 수 있다.
3. react-touter-dom > BrowserRouter 불러오기
[index.js]
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(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);
// 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();
index.js는 리액트가 처음 시작될 때 가장 먼저 시작한다. import를 이용해 라이브러리, 모듈을 다운받을 수 있기 때문에 import를 통해 브라우저 라우터를 불러오고, App을 감싸준다. 부모 컴포넌트가 되는 것이다.
App은 자식 컴포넌트로서 자유롭게 페이지 이동이 가능해진다.
![](https://blog.kakaocdn.net/dn/sI4jE/btscyZ885NN/CIZdNfUyWlQL96HvGcgiB0/img.png)
실행을 해보면, hihi라는 아직 없는 경로를 검색해도, 똑같은 메인페이지가 나오는 것을 확인할 수 있다.
4. react-touter-dom 적용하기
[App.js]
import './App.css';
//index.js 생략 가능
import MainPageCompnent from "./main/index.js"
import {Switch, Route} from 'react-router-dom';
function App() {
return (
<div>
<Switch>
<Route path={"/"}>
<MainPageCompnent></MainPageCompnent>
</Route>
</Switch>
</div>
);
}
export default App;
리액트 라우터 돔을 app.js에서도 import 해준다. 그 중 Switch와 Route를 가져온다.
App() 함수의 리턴 값으로 1개만 출력할 수 있기 때문에 <div>로 감싸주고, 경로 변화가 필요한 부분에 <Switch> 태그로 감싸준다. Route 태그로 path 경로를 정해준다.
이 때 참고로 말하자면, <MainPageComponent>는 위에 import에서도 볼 수 있듯이 main/index.js 경로에 우리가 만들어준 메인페이지를 담고 있다.
![](https://blog.kakaocdn.net/dn/DC3aC/btscmL5F61E/eTvok8J1bSU2sRiGJn8hgk/img.png)
새로운 페이지를 2개 더 만들어 보겠다. 상품관리 관련 페이지를 관리하는 product 폴더 아래 index.js 파일을 만들었고, 업로드 관리 관련 페이지를 관리하는 upload 폴더 아래 index.js 파일을 만들었다.
[App.js]
import './App.css';
//index.js 생략 가능
import MainPageCompnent from "./main/index.js"
import {Switch, Route} from 'react-router-dom';
import UploadPage from './upload';
import ProductPage from './product';
function App() {
return (
<div>
<Switch>
<Route exact={true} path={"/"}>
<MainPageCompnent></MainPageCompnent>
</Route>
</Switch>
<Switch>
<Route exact={true} path={"/product"}>
<ProductPage></ProductPage>
</Route>
</Switch>
<Switch>
<Route exact={true} path={"/upload"}>
<UploadPage></UploadPage>
</Route>
</Switch>
</div>
);
}
export default App;
그리고 새롭게 만든 2개의 파일을 import해주고, 따로 경로를 만들어 주었다. 해당 경로로 갔을 때 보일 페이지를 <함수></함수>로 표시해준다.
![](https://blog.kakaocdn.net/dn/bh9qty/btscwoaN8op/PwluOmqKs6lvC7hYWKBnV0/img.png)
![](https://blog.kakaocdn.net/dn/cIk4Dx/btscmLkgt7M/RvWnKYU0bXz22Kf3q8orfK/img.png)
그러면 이렇게 페이지별로 주소가 맵핑되는 것을 확인할 수 있다.
출처 :
비전공자를 위한 진짜 입문 올인원 개발 부트캠프 - 인프런 | 강의
왕초보도 할 수 있는 웹, 서버, 모바일 앱, 머신러닝까지 익히는 끝판왕 풀스택 강의!! 개발을 어디서부터 시작할지 막막했다면 이 강의를 강력 추천할게요. Javascript 하나로 진행합니다!, - 강의
www.inflearn.com
'FE > React' 카테고리의 다른 글
[React] 상품 상세페이지 만들기2 : postman id 설정 (0) | 2023.05.02 |
---|---|
[React] 상품 상세페이지 만들기 : 어떻게 여러 페이지를 한 번에 구분할 수 있을까? (0) | 2023.04.27 |
[React] axios 통신으로 상품 정보 가져오기 (0) | 2023.04.20 |
[React] jsx / Props / state (2) | 2023.04.20 |
[React] React 프로젝트/컴포넌트 구조 (0) | 2023.04.18 |