앞시간에서 말했던것처럼 리액트는 싱글페이지 애플리케이션이다. 페이지가 하나이기때문에 a태그를 쓸 수 없다. 그렇기에 라이브러리가 하나 필요한데, 그게 바로 리액트 라우터돔이다!
다운을 받도록 한다.
다음 코드를 조금 변경할건데,
기존에 만들었던 HomePage.js에서 헤더와 푸터를 지웠다.
다음 로그인 페이지에서도 헤더와 푸터를 지웠다.
그리고 App.js에 이 두개를 넣었다.
다음 홈페이지를 지우고 index.js로 가보자
BrawserRouter로 App을 감싼다.
다음 App.js로 가서 이렇게 코드를 적는다.
그냥 localhost:3000이면 HomePage를 그리고 /login으로 가면 LoginPage를 그리게 된다.
만약 exact를 안쓰면 /로 시작하는거 다 읽게 되므로 정확하게 입력하도록 exact를 true로 설정해주자.
화면이 제대로 나온다. 만약 빈 화면만 출력되면 npm i react-router-dom@5.2.0 이렇게 라우터 돔을 다시 설치해보자.
/login을 입력하면 로그인페이지가 return이 되는 것을 볼 수 있다. 이제 위에 헤더에 메뉴를 클릭했을때 이동하도록 해보자.
a태그를 사용했을 경우 페이지로 이동이 되긴하는데, 전체 페이지를 계속 다시 부르게 된다. 하지만 우리가 해야할건 중간에 있는 것들만 바꿔줘야 하는 것.
이렇게 링크를 걸고 홈과 로그인을 클릭하면 전혀 화면의 깜빡거림(페이지 리로딩) 없이 바로바로 이동이 된다.
이건 내가 저 로그인 링크를 클릭하는 순간, path가 /login으로 연결되고 <Route path="/" exact={true} component={HomePage} /> 이 부분을 지우고 <Route path="/login" exact={true} component={LoginPage} /> 이걸 연결하는 것이다.
이런식으로 라우팅을 할 수 있고 데이터 또한 당연히 던질 수 있다.
match.params로 값을 넘겨보자
우선 /login:id라고 적게 되면 url에 login/2를 입력하게 되면 2의 값을 받을 수 있다.
LoginPage로 가서 props로 아까 적은 id값을 받고 콘솔에 찍어보자.
여러 데이터들이 넘어왔는데 match에 params를 보면 id값이 2인걸 볼 수있다.
밑줄친 부분에서 볼 수 있듯이 정확하게 id를 뽑아 낼 수 있다.
여기서 Link 디자인을 좀 해보자.
이런식으로 Link를 상속해서 쓸 수 있다.
라우팅은 여기까지.
이 글은 유튜브 메타코딩 채널의 영상을 보며 공부한 내용을 기록한 게시글입니다.
