~0530 React Router 6월이다. 22년 절반이 지나가려해

일주일의 시작 월요일! 기분 좋게 내 사진으로 시작

+작성 시작은 월요일에 했는데 이것저것 치이느라 이제야 작성한다 푸하하 세상은 요지경

이리와 안아줄게! 뒤에는 기괴한 핑크 누나

사진 좀 백예린 느낌 나지 않니 애들아 아니라고? 웅

 

저번에 정신없이 덕지덕지 강의에 route, await sync 등 나를 혼란하게 했다만 이번 수업으로 route는 좀 반가운 친구가 되었다.

오늘은 route의 작성법, 그리고 활용하는 방식들에 집중하면 된다. 가보자 고!

 

리액트 라우터 돔을 사용하기 위해 몇가지를 import 해야 하는데 Switch, Route, Browse as Router가 보이고

Link 또한 있는데 이건 나중에 배울 거니 일단 보류.

라우터에는 두 가지 종류가 있는데 Hash와 Browser 큰 차이는 없고 url의 생김새에 차이가 있다.

Hash에 경우 #을 붙이고 Browse같은 경우 우리가 흔히 아는 http://localhost:3000/이런 모습을 보인다.

저번 시간 날 난감하게 만든 라우터 이번엔 다르다.

만들어진 코드의 구조를 보자 가장 밖에 Router, 그 안으로 Switch, Route 그 안에 Home.js가 있다.

코드가 노래 치즈케익 같아

Switch는  Route를 찾는다 여기서 Route는 url의 세부 경로라고 생각하면 된다.

그리고 이 route는 경로를 통해 컴포넌트를 렌더링 하는 기능을 한다.

그래서 우리는 Route안에 컴포넌트의 경로를 작성하면 된다.

그리고 Switch는  한번에 하나의 라우트만 렌더링 하는 기능을 한다.

리액트 상에서는 한번에 여러 개의 라우트를 렌더링 가능하기 때문이다.

이런 식으로 url상에서 3001/까지가 메인페이지 그 뒤로 붙는 상세 url의 경로를 Route가 보유하고 switch가 Route를 통해 얻은 경로로 컴포넌트를 렌더링 한다. 말이 길지 그냥 주소 들고와서 컴포넌트 보여주는 친구들이다. 

 

자 아무튼 위 같이 깔끔하게 작성하면 보이다시피 엥 오류가 뜬다.?

前 영어 1등급의 해석 모듈이 안찾아져. 컴포넌츠 폴더에 Movie파일을 routes에서 해결할 수 없다.

해결은 간단했다. 이것저것 만지다 보니 경로 설정을 잘못했다. 하하

상위폴더여서 .이 아니라 .두개붙이는거 리눅스 생각나네 킁

이제 Route의 기능과 사용법도 알았겠다 만들어볼 텐데, 우리가(오늘) 사용할 route는 총 2개 홈 화면으로, 나머지는 movie상세 페이지로 가도록 한다.(무비 상세페이지는 아직 꾸미지 않음 -> Detail.js)

 

여기서 두 번째 문제라면 문제에 봉착했다. 댓글에 'react-router-dom버전 6이 나왔어요~',  '6 버전에서는 ~방식으로 작성해요'

난 당연히 강의에서 버전 5를 써서 이해하는데도 더 도움이 될 것 같아서 버전 5로 하려 했는데,

또 둘째가라면 서러운 팔랑귀인 나는 점점 6 버전에 눈이 갔다. 그리고 결정타!

친구의 추천으로 버전 6을 설치해서 진행했다 내가 진행하면서 체감하고 알게 된 변경점에 대해 적어보자면

 

1. Switch컴포넌트가 Routes로 변경되었다. 당연히 import도 Switch가 아닌 Routes로 해주면 된다.
2. Route 컴포넌트 사이에 자식 컴포넌트를 넣지 않고, elementprop에 자식 컴포넌트를 할당한다.
   Route path ="/샬라 샬라" element ={<Home/>} 요런 식으로

2번에 대한 설명은 밑에 작성한 코드를 통해 이해해보자. 버전 6으로 바뀌면서 코드가 어떤 식으로 바뀌었는지

코드 작성법을 모르는 응애응애 얼라가봐도 간단해진게 보인다.

아 버전 변경이랑은 별개로 우린 Detail페이지를 구현할 거니까 Detail.js파일을 routes폴더에 넣고, Detail.js파일 경로로부터 import 해주고(line 3) Home과 동일한 방법으로 Route를 만들었다.

처음에는 Home컴포넌트에서 /Movie라는 경로로 이동하게 되면 Router가 Detail컴포넌트를 렌더링 하게 되는 식이다.

 

우리가 서로 간의 문은 만든 셈이고 이동 가능한 복도(이동수단을 만들면 된다.)

(영화 메인 페이지에서 제목을 클릭하면 Movie컴포넌트로 이동하게 해주는 역할)이 필요한 상황

 

이때  사용하는 것이 처음에 잠시 보류하기로 했던 Link를 사용할 것이다. 

우리가 전에 html, js를 배울 때 링크를 통해 이동한다. -> a태그 안의 href가 가장 먼저 떠오르겠지만 이 방법은 페이지가 전체가 다시 실행된다는 치명적인 단점이 있다. 우린 React를 통해 재사용하는 것을 피하고 싶다. 따라서 Route와 Link를 사용하는 것이다.

 

누르면  Router을 실행시키고 싶은 곳에 Link를 포함시킨다 우리는 영화 제목인 h2태그  밑에 쭉 이어서 보자.

<Link 그 안에는 to=어디로 갈지 컴포넌트 주소>{영화 제목}</Link>

제목을 클릭하게 되면 /movie -> Detail페이지로 이동이 가능해졌다. 새로고침이 되지 않은 채 이동이 되는 것을 볼 수 있다.

 

오늘 작성한 App의 코드 모습 Router를 배워 보았다.

기존에 모든 걸 담당한 App.js

지금은 다른 파일에게 역할에 맡게 분담하고, react-router-dom 컴포넌트들을 가져와 path에 맞는 컴포넌트를 보여준다.

 

결과물 gif를 마무리로 끝 수업자료를 늦게 받아 이거 해치우러 가야 한다.

메인 페이지에서 제목을 누르면 이동! Router와 Link 완벽 활용