의류 쇼핑몰 7 | Routing 1 시작

Routing 란? 

https://www.crown-clothing.com  웹사이트에서 

navigation bars 또는 side panel을 만들어 어떤 페이지를 렌더할 지 정한다. 

 

바에 있는 버튼을 누르면 

https://www.crown-clothing.com/route-1

route 1을 적어주면 그에 해당하는 컴포넌트들이 보이게 한다. 

 

 

항상 있는 컴포넌트들 중에

어떤 컴포넌드를 렌더해 페이지에 보이게 할 지 정하는 일을 routing이라고 한다.

 

 

 

sub-route도 가능 

route 안에 sub-route로 또 연결을 해야 할 수 있다.

 

 

 

 

라우팅 라이브러리

routing에서 2 개의 유명한 라이브러리가 있다. 

1. React Router

2. Reach Router 

이 둘 중에 React Router가 많이 쓰인다. 

리액트의 모든 것은 컴포넌트이다. 

페이지도 같은 원리로 작동한다. 

 

 

React Router 설치

React Router(바로가기)를 가서 

document-installation에서 router를 다운 받는다.

 npm install react-router-dom@6 

 

 

---

index.js에 routing 설정 

1.  index.js에 BrowerRouter component를 import 해준다. 

2. <App> component 전체를 router로 감싸주기 위해

<App />을 <BrowserRouter> 태그로 App을 감싸준다.

 

BrowerRouter

generic router로서 BrowerRouter를 써준다. 

the BrowserRouter leverages the URL in order to keep track of the history of where the user is navigation through.

It behaves any kind of routing based on URL to behave.

 

generic: 총칭의, 통합적인, 포괄적인

behave: 처신하다. 예의바르게 생활하다.

 

 

 

home router 설정 

src 안에 routes 폴더를 새로 만든다. 

 

 

 

home 파일에 App.js 내용을 모두 복사해서 붙여넣기 한다. 

 

 

 

const App을 const Home으로 바꿔주고 

directory 파일 포인팅도 수정해 준다. 

 

 

 

App.jsx 로 가서 

home.jsx를 연결하고 App 함수 안 모든 내용을 지우고, 

<Home />로 대체한다.

 

 

 

App에 Route 설치 

이제 App에서는 Route를 설정할 것이다. 

App.jsx 에서 Routes, Route를 import 한다. 

 

 

path: 기본 url 뒤에 붙을 주소명을 적어주어 해당 주소를 쳤을 때 element가 나온다. 

element: 렌더링할 컴포넌트 

 

 

잘 나오는 것을 볼 수 있다.