주소창을 확인하고 노출되는 컴퍼넌트
외관상 웹페이지와 동일하게 보임
- "페이지 이동" 기능을 리액트에서는 리액트 라우터를 통해 처리할 수 있다.
- a태그와 Link태그 잘 구분해서 쓰기!
1-1. 라우트 돔 설치
npm install react-router-dom
1-2. index.js 임포트 & App 밖에 < BrowserRouter > 껴주기
"App 바깥쪽에 이 기능 쓸게" (하나만 삽입!)
import { BrowserRouter } from 'react-router-dom';
1-3. App.js 임포트
import { Routes, Route } from 'react-router-dom'; <Routes>
<Route></Route>
<Route></Route>
<Route></Route>
</Routes>
1-4. path 3개 삽입 ( = 컴퍼넌트 3개 준비 )
-
주소창에 따라 컴퍼넌트가 선택되어 나감
즉, 주소창을 보고 웹페이지 노출 (컴퍼넌트만 보고 바꿔치기 됨) -
각각 < Notice />< Gallery />< Nopage /> 3개의 컴퍼넌트 생성 (1-6)
-
/*/ 사전에 정의하지 않은 경로로 접근하는 경우, Nopage 이동 처리
1-5. Link 태그 (+Link 임포트)
- 내 사이트 안에서 링크 이동 + 서버 새로고침 안 함!
└> useState 아님! 외부링크 아님! (렌더링x) - 밖에서 볼 때는 a태그로 변환됨.
1-6. 컴퍼넌트 3개 생성 후 임포트
rsfp
결과물
설명 참고 https://goddaehee.tistory.com/305
ex) 쇼핑몰 사용 예시
① 라우터를 사용하기 전에, 간단한 쇼핑몰 샘플 페이지 생성
App.js에 임포트할 3가지 페이지(=컴퍼넌트)
- 헤더.js
- 메인페이지.js
- 상품페이지.js
② 아직은 헤더/메인/상품페이지가 같이 보인다
③ 라우트 & Link
- < BrowserRouter >
- < Routes > 와 < Route >
- < Link > 주소창을 바꿔치기 하는 놈!
④ 4개의 모듈을 모두 작성한 후 접속하면, 페이지 분기 처리됨
ex) localhost:3000 → 메인 페이지
ex) localhost:3000/product/1
ex) localhost:3000/kfdkdfre → NotFound 페이지(404 Error)
