해당 벨로그는 [코딩앙마] React js 강좌 를 수강하고 작성한 글입니다.

react-router-dom

라우팅 구현을 위해 react-router-dom 을 설치한다.

react-router-dom 에서 몇개를 import 한다.

App.js

App.js 를 BrowserRouter 로 감싸준다.

Header 는 모든 페이지에 다 나와야 하니까 Header 다음 부분을 Switch 로 감싸준다.

Switch 의 내부는 URL 에 따라 각각 다른 페이지를 보여줄 것이다.

Switch 의 외부는 모든 페이지에 공통으로 노출된다.

swtich(Routes) 로 route 들을 감싸놓으면 일치하는 첫번째 결과를 보여준다.

/day 에도 / 가 포함되어 있어서 / 를 보여준다. → 그래서 exact 를 써줘야 한다.

exact 를 사용하면 / 에 일치할때만 / 를 보여준다.

※ react-router-dom v6부터는, 아래처럼 사용해야 된다.

• Switch 대신 Routes를 사용

• Route 안에 component 대신 element 사용

페이지에 날짜(day)를 적어주자.

결과창

/ 에서 Day n 을 클릭하면 day 컴포넌트를 보여주도록 코딩해보자.

DayList.js

html 은 <a> 태그를 사용하지만, react-router 는 link to 태그를 사용한다.

결과창

a 태그로 렌더링 된 것을 확인할 수 있다. 클릭시 /day 로 잘 이동한다.

토익 영단어(고급) 을 누르면 / 페이지 (메인 페이지) 로 이동하도록 link 태그를 이용했다.

DayList.js

우리가 원하는 것은 Day 1 을 누르면 1일차 단어장이 나오는 것이다.

day.day 는 몇일차인지 나타낸다.

링크에 day 에 따라 알맞은 숫자가 나오고 있다. 하지만 단어는 아직 day 에 맞춰 나오지 않고 있다.

App.js

url 에 있는 값을 day 로 사용하려면 어떻게 하면 될까?

react-router-dom 에서 dynamic 한 데이터를 처리할때는, 콜론(:)으로 처리하면 된다.

이렇게 설정하면 day 1 로 들어왔을 때, :day 라는 변수로 1을 얻게 된다.

Day.js

url 을 포함하는 값을 얻을려면, react-router-dom 에서 제공하는 useParams 를 이용하면 된다.

console.log 에 useParams 값이 찍히는 것을 확인할 수 있다.

결과창

Day.js

Day.js 에 useParam 을 이용해 해당 day 에 맞게 페이지가 설정되는 것을 확인할 수 있다.

useParam 에 들어오는 값은 숫자가 아니라 문자이다.

결과창

Day.js

useParams 로 들어오는 변수 day의 값은 문자, word.day 는 숫자로 구성되어있다.

문자와 숫자를 비교하니 filter 에 아무것도 안걸려 결과가 안나온것

day 도 숫자여야 word.day 와 비교할 수 있다.

결과창

문자값이 들어와도 숫자로 변경되어 day 와 비교되는 것을 확인할 수 있다.

코드 수정을 통해 원하는 결과창이 나온 것을 확인할 수 있다.

입력

주소창에 임의의 문자열을 입력하면 아무 결과도 출력되지 않는다.

App.js

코드를 확인해보면, xxxxxx 에 일치하는 라우터를 확인할 수 없어서 결과창에 아무것도 출력되지 않는다.

EmptyPage.js

EmptyPage.js 에서 홈으로 돌아가는 링크를 만들었다.

App.js 에 EmptyPage 를 import 하고 홈과 day링크를 제외한 링크주소는 EmptyPage 가 결과창으로 나오도록 route 태그에서 설정한다.

결과창