🐭 자 뭐부터 시작해?
파일 구성
일단 기본적인 파일 구성부터 만들어 보도록 합시다 src 파일에 라우팅 코드를 작성할 Router.js 파일과 라우터마다 들어갈 Component 파일을 폴더로 따로 만들어서 관리합니다
Global.css는 시각적으로 잘 보여주기 위해 따로 만들었고 Tailwind css를 사용할 겁니다 스타일링에 관련 얘기는 나중에 따로 포스팅하도록 하겠습니다
🐭 라우터 구성은 어떤식으로 만들어?
라우터 구성
우선 코드를 보면서 하나씩 설명해보도록 하겠습니다
🐭 하나씩 설명해줘
HashRouter vs BrowserRouter
라우터를 다루는 큰 틀이고 라우터 종류가 5가지가 있지만 대부분은 BrowserRouter 와 HashRouter 둘 중 하나를 사용하는데 각각의 장점을 알아봅시다
- HashRouter
- 정적인 페이지에 적합하다
- 새로 고침 해도 에러가 나지 않는다
- gh-pages 배포가 편리하다
- BrowserRouter
- 동적인 페이지에 적합하다
- 새로 고침 하면 경로를 찾지 못해서 에러가 생길 수 있다
- 새로 고침 해결에 추가적인 설정이 필요하다
HashRouter는 주소에 #이 들어가 거슬리지만 우리는 현재 예제를 만들고 이후에 gh-pages 배포도 할 예정이기 때문에 간편한 HashRouter로 라우터를 구성한다
Routes
기존 V5이하 버전은 Switch라는 네이밍을 가지고 있었지만 V6 버전으로 올라가면서 Routes로 네이밍이 변경되었다 말 그대로 route를 묶는 용도라고 생각하면 된다 Routes 태그로 묶고 그 안에 route를 구성하는 방식으로 라우터를 짜면 된다
Route
이제부터 React-router-dom을 사용하는 가장 큰 이유다 이렇게 route마다 주소를 부여하고 그 주소에 맞는 component를 실행시키는 방법이다Route만 따로 코드를 자세히 봅시다
🐭 Route안에 내용에 대해 설명해줘
<Routes>
<Route path="/" element={<Home />} />
<Route path="/charley" element={<Charley />} />
<Route path="/duck" element={<Duck />} />
</Routes>path && element
두 개 말고도 여러 가지가 있지만 무조건 사용해야 하는 두 가지를 설명하겠습니다
path는 url 경로를 넣어주는 곳이다 React를 제일 먼저 실행했을 때 우리는 어떤 주소에 있는가
따로 설정을 안 했다면 http://localhost:3000/ 에 있을 것입니다 여기서 맨 끝에 "/" 이 문장부터 path에 넣으면 된다 그렇다면 첫 실행할 때 보이고 싶은 페이지는
<Route path="/" element={<Home />} />바로 이 페이지가 처음으로 보이면 성공적으로 라우팅을 성공한 것이다 결과 화면을 확인해 봅시다
다른 페이지로 이동하기
그렇다면 이제 화면 내에 찰리 시방, 오리방으로 들어가려면 어떻게 해야 하는 것일까 여러 가지 방법이 있지만 우리는 React-router-dom에 있는 Link라는 태그를 이용해 이동해 보겠습니다 Home 컴포넌트의 코드를 확인해 봅시다
🐭 이상한 용어들이 있는데..?
현재 나는 Tailwind를 손에 익히기 위해 계속해서 사용 중이기 때문에 이 블로그를 볼 때 className에 적힌 건 완전히 무시하고 봐줬으면좋겠습니다 다음에 Tailwind css에 대한 포스팅을 올리면 저 문법들이 전부 어떤 건지 알 수 있을 것이다 최대한 빨리 올리도록 하겠습니다 우리는 지금Link 태그와 그 안에 있는 to라는 문법에 집중해 봅시다
<Link to="/charley">
찰리방
</Link>
<Link to="/duck">
오리방
</Link>to
사용법은 어렵지 않다 Router.js에서 구성했던 route에 path의 값과 to의 값이 같으면 그 element에 들어 있는 component 파일로 이동하는 방식이다 추후에 Api fetch관련 내용을 올리면서 to와 path를 좀 더 깊게 활용하는 방법을 적도록 하겠습니다 일단은 이런 식으로 동작한다 정도만 알아두면 좋을 거 같다
🐭 근데 이거 a 태그랑 같은거 아니야?
a 태그와 같은건가?
우리가 html로만 파일을 만들었을 때 다른 파일로 넘어가기 위해 a 태그를 사용했던 사람들이라면 이쯤에서 궁금증이 생길 것이다 a 태그로 해도 똑같은 거 아냐?? 정답은 다릅니다 이유는 밑에서 설명해 보겠습니다 Link 밑에 a 태그로 코드를 하나 작성해 보겠습니다
<a href="#/duck">?</a>HashRouter를 사용 중이라 정확한 확인을 위해 "/"앞에 #을 넣어준다 BrowserRouter을 사용 중이면 상관없다 한번 직접 클릭해서 차이를 확인해 봅시다
정상적으로 들어가진다...?
들어가지긴 합니다 그렇지만 이러면 React의 의미가 사라진다 다시 한번 확인해 봅시다 Link를 통해 들어갔을 때와 a 태그로 들어갔을 때의 차이를 바로 새로 고침의 차이이다 SPA(Single Page Application) 로단일 url을 가지고 있다 고로 어떤 곳으로 이동해도 새로 고침은 일어날 수 없다 이것만의 문제는 아니다 나중에 다룰 거지만 Link에는 state를 사용해 prop을 넘겨줄 수 있다 a태그는 그걸 할 수 없기 때문에 새로운 페이지에서 새로 모든 것을 다시 만들어야 한다 이러면 아무런 의미가 없어진다 고로 React에서는 아예 다른 페이지를 유저에게 보여주는 용도가 아니면 a 태그는 사용하지 않도록 합니다
🐭 근데 이거 계속 Link 만들어야해? 다른 방법 없어?
Header 파일 만들기
위에서 마저 설명 안 한 것이 있다면 Routes는 Route들을 묶는 태그라고 설명했었다 그렇다면 새로 어떤 위치에 있어도 항상 보이게 하고 싶다면 Routes 바깥쪽에 component를 넣어두면 그 파일은 어떤 곳에 있어도 계속 보일 것이다 다음 포스팅에서 Header 파일을 만들어 내비게이션을 만들어 라우팅을 좀 더 편하게 만들어 보겠습니다
