Router

Router

갓 개발을 시작한 초보라면 대체로 single page 개발을 해왔을거에요.

그러나 React를 시작하게 되고 프로젝트가 점점 복잡해질수록

하나의 페이지에서 감당하기 어려워지죠.

이때 router를 이용해 페이지를 나눠야 할 때가 온답니다.

 

route 길, 노선이라는 뜻이 있어요.

router는 뜻 그대로 우리에게 가는 길을 제공해주죠.

사용자가 url을 전달하면 router는 어떤 페이지로 연결할 지 결정해줘요.

 

보통 single page에서 작업을 하면 북마크나 뒤로가기, 앞으로 가기가

불가능해서 여러 불편함을 초래해요.

그러나 router를 이용하면 이 모든 것을 간단하게 이용할 수 있답니다.

 

 

Router 사용법

먼저 router를 설치해줍니다.

터미널에 'yarn add react-router-dom'을 입력하면

잠시후 설치가 완료돼요.

package.json에서 잘 설치 되었는지 확인해볼까요?

네. 잘 설치 되었네요!

 

이제 app.jsx 파일로 이동합니다.

router는 컴포넌트처럼 사용할 수 있어요.

보다 손쉽게 이용할 수 있답니다.

 

https://reactrouter.com/web/guides/quick-start

router 공식 홈페이지입니다.

사용법이 보다 자세하게 나와있어요.

저는 그 중 제가 학습한 router 방식만 적어볼게요.

더 궁금하신게 있다면 위 페이지에서 찾아보면 되겠습니다!

 

먼저, components를 두 개 만들어볼게요.

home.jsx와 login.jsx를 만들었어요.

하나는 홈페이지 main이고 하나는 login 할 때 사용하려 합니다.

물론 두 가지는 다른 페이지어야 하겠죠.

 이때 router를 통해 두 개의 페이지로 나누어주는겁니다.

 

일반적으로 페이지를 보면 '/'로 나누어져 있죠?

https://reactrouter.com/web/guides/quick-start

router 공식 홈페이지를 보면 /quick-start 이렇게 나눠져 있어요.

저희도 home과 login을 나눠볼 예정입니다.

'/home'

'/login'

이렇게 말이죠.

이 아이들이 페이지를 구분시켜 줄거에요.

 

 

전체적인 구조를 사진으로 올려볼게요.

 

먼저 

<BrowserRouter>로 감싸주고

그 안을 <Switch>로 감싸줍니다.

그리고 <Route>를 사용하는데요.

<Route>는 감싸줄 component 갯수만큼 만들어야 해요.

각 component를 route로 감싸는 거죠.

 

저는 login과 home의 별도 페이지를 만들 예정이니

route도 2개를 사용하면 되겠죠?

route 태그 안에 path를 사용해 주소를 정해줍니다.

 

이제 router는 우리가 정해준 url을 인식하고 해당 페이지로 연결해줘요.

아참, import 하는 거 잊지마세요!

물론, 자동으로 import 되지만 꼭 확인해보세요.

 

 

 

자, 이제 확인해볼까요?

localhost 뒤에 path에 입력한 부분을 치면

해당 주소로 component가 분리된 것을 볼 수 있습니다.

 

 

🍎

 

 

 

출처: https://reactrouter.com/web/guides/quick-start