리액트 라우트기능 알아보기 겸 사용법 작성해두기
라우팅과 SPA, CSR
라우트 기능을 알아보기전 라우팅이란 간단히 말해 사용자의 요청한 URL에 따라
그에 맞는 URL을 보여주는 것 또는 페이지 이동
라우팅을 알아보기 전 리액트는 SPA로 작동이 된다. (Single Page Application)
위의 사진은 SPA가 아닌 MPA(Multipage Application)로 작동하는 방식의 예시이다.
유저가 Home을 요청을 했을때 Home.html 파일을 보여주고 mypage를 요청했을 때 Mypage.html을 보여주는 방식이다. 하지만 리액트는 SPA로 작동하기 때문에 하나의 페이지로 구성이된다.
MPA의 방식은 새로운 페이지를 불러오는 것이기 때문에 불러올 때 마다 새로고침이 발생한다.
SPA의 방식은 모두 index.html로 구성이되어있기 때문에 새로고침이 발생하지않는다.
- 유저가 Home을 요청해도 index.html, mypage를 요청해도 index.html
모두 index.html로 작동한다해서 페이지이동이 불가능하다는건 아니다
그걸 구현하기위해 React Route를 사용해야한다.
리액트로 구현한 페이지를 알아보면 웹을 요청하면 일단 index.html을 보내준다.
이 상태에서 post라는 페이지로 넘어가고싶다. 라고 버튼을 눌렀을 때
아래의 그림처럼 서버에게 post를 요청하는게 아니고 REACT APP이 알아서 페이지를 업데이트를 시켜버린다.
이에 따른 장점은 서버에게 요청을 하지않아도 되니 페이지 로딩시간이 없어서 페이지 전환 자체가 빨라진다. 그리고 어떤 페이지에 따라 보이는 데이터가 달라지는데 이렇게 데이터가 필요한 경우에만 서버와 데이터를 주고받는다.
아래의 그림처럼 데이터만 요청을 해와서 화면에 불러와줌
MPA에서는 html,데이터 모두 한번에 조립해서 받기때문에 느리지만
SPA에서는 웹페이지부터 업데이트 시킨 뒤 데이터가 아직 없다면 잠깐 로딩띄운 뒤 받아오면 되기때문에 페이지 전환이 굉장히 빠르다.
그리고 이 방식을 CSR(Client Side Rendering)이라고 부른다.
CSR은 클라이언트가 알아서 렌더링하는 방식
React Router 사용방법
React Router를 사용하기 위해 설치를 해줘야하기때문에
구글에 React Router 또는 React Router install을 검색해주면 된다
여기서 npm인지 Yarn인지 알아서 설치해주면 된다.
설치는 작업중인 폴더 터미널 열어서 명령어 넣어주면 됨.
사용하기 앞서 페이지 이동을 구현해보기 위해 pages 폴더 안에 js파일을 4개를 만듦(페이지)
그리고 Router를 사용하기위해 App.js에서 return안의 최상위 태그를 BrowserRouter 태그로 감싸줘야한다.
- 감싸기 전 BrowserRouter을 import해오는거 까먹으면 안됨.
그리고 pages에 만든 page들을 모두 import해오기
이제 위의 페이지들을 라우팅해보자.
- 라우팅을 하기 전 Routes 태그를 하나 생성해준다. Routes또한 import해온거 확인하기.
이제 Routes 안에 Route할 페이지들을 추가하면 된다.
- 여기서도 Route태그를 사용하기위해 import해온거 확인해두기.
Route태그로 모든걸 연결하는데 path="경로" 경로를 지정해주고, element={보여줄거}를 구성해준다.
위의 path='/'는 홈페이지 메인인 Home, index 초기화면을 뜻한다. 그렇기에 element={보여줄 Home}을 가져온것.
그리고 아래 path='/new' 경로를 new로 설정하고 element={보여줄 new컴포넌트(페이지)}를 가져와달라 라고 작성 후 페이지 URL경로에 /new를 붙여서 들어가보면
new페이지가 잘 나오는걸 확인해 볼 수 있다. 그런데 App.js는 new.js에 작성된게 아니고 App.js에 작성이되어있는데 나타나는 이유는 페이지가 바뀔때 변화하는 부분은 Routes 안에 작성되어있는 부분만 변화가 되기때문이다. 그 밖에 작성되어있는 H2태그가 모든 페이지에서 보여지는것.
이제 모든 페이지들을 라우트 해둔뒤 확인을 해보면
잘 나오는거 확인 가능하다.
근데 페이지이동을 URL에 하나하나 입력해서 사용할 순 없다.
그렇다고 html에서 페이지 이동할 때 사용했던 a href='링크' 이걸 사용하면 SPA를 사용하는 의미가없다. 새로고침이 일어나기때문.
Router 이동 페이지이동하는 버튼만들기
Router를 이동하기위해 a태그를 사용할 수 없다는걸 알았으니 다른 방법을 사용해야한다.
React-Router에서는 별도의 컴포넌트를 사용해서 이동한다.
이동 기능버튼을 구현하기위해 컴포넌트 하나를 만들어서 작성해보자.
RouteTest.js 파일을 하나 만들어서 안에 코드를 이렇게 작성을 해주었다.
React-Router에선 a태그가아닌 Link 태그를 사용해서 경로이동을 해야하는데
- 여기서도 import해오는거 잊지않기.
사용하는 방법은 보다시피 Link태그를 만들고 옵션으로 to={'경로'} 를 작성해주면 된다.
a태그와 사용방법이 거의 흡사하기 때문에 간단하다.
RouteTest.js를 App.js에 import해와서 화면에 구성해준 뒤 작동시켜보면
페이지이동이 잘 되는걸 확인해 볼 수 있다. URL까지 캡쳐가 되진않았지만 URL까지 잘 변경이 되고있다.
React Router Dom 의 유용한 기능들
(강의내용 캡쳐본)
위의 기능들이 있는데
간단하게
Path variable - 경로의 변수를 사용하는 기법
Query String - 1번과 비슷한 역할이지만 URL과 함께 데이터를 전달하는 쉽고 간단한 방법
Page Moving - 페이지를 이동시키는 링크태그가 아니라 함수에서 유저가 이동하지않아도 강제로 이동시키는 코드작성할 때 사용
1번부터 차례대로 알아보자.
- Path variable (useParams)
1번기능을 알아보기위해 만들었던 페이지 Diary.js의 역할을 알아보면
Diary는 사용자가 작성한 일기의 상세내용 페이지 역할인데
여러 일기를 쓰고 그 중 사용자가 1번일기를 보고싶은지 2번일기를 보고싶은지를 알아야 하기때문에 상세페이지를 구현할 때 URL에 /1 또는 /2 .. 등등 숫자로 id를 넣어주는데
이걸 URL에 변수를 담아 전달하는 방법을 Path variable이라 한다.
일단 1번 일기 페이지를 확인해보기위해 diary/1 URL로 접속을 해보면
Diary페이지가 뜨지않고 콘솔창에 매칭되는 라우츠가없다 라고 알려준다.
이걸 해결해보기위해 Diary 페이지를 만들었던 Route태그에 path경로에 id를 붙여주자
id를 붙여준 뒤 저장해주면
다이어리 페이지가 나타나는걸 볼 수 있다. 허나 이제 뒤에 id값을 붙였기때문에
그냥 diary URL로 들어가면 에러가 난다.
이제 URL에 있는 /1 이라는 숫자를 가져오는 방법을 사용해보기위해
useParams를 사용해보자.
Diary.js로 가서 import 해오는거 잊지말고 import해온 뒤 사진처럼 사용하면 된다.
위에서 route태그에 path속성에 :id로 설정해두었기때문에 id로 꺼내면 된다.
빼내온 id를 콘솔창에 찍어서 확인해보면
잘 나오는걸 확인가능하다. 여기까지가 Path Variable에 대한 설명이다.
이걸 잘 이용하면 상세페이지를 각각 구현이 가능하다.
- Query String (useSearchParams)
웹 페이지에 데이터를 전달하는 가장 간단한 방법.
말 그대로 데이터를 전달하는 방법인데
예시를 들어보기위해 edit.js에서 작성을해보면
일단 URL 접속을 그냥 /edit 이 아닌 /edit/?id=22&mode=dark 로 접속을 해보았는데
이렇게 접속을 해도 edit페이지가 잘 보여진다.
Path Valiable 에서는 별도의 처리를 해줘야만 페이지가 보여졌는데
Query String에서는 알아서 페이지가 보여진다. 그래서 여기서 알 수 있는건
URL의 edit? 에 물음표 뒤에있는 경로들은 페이지 라우팅하는 경로에 영향을 주지않는다는걸 알 수 있다.
이제 useSearchParams를 사용해보자.
사용방법은 위와 같이 useState 사용하는것과 살짝 흡사하게 searchParams와 setSearchParams로 대괄호 안에 작성되는데 첫번째 searchParams는 get을 통해 데이터를 가져올 수 있고 setSearchParams는 searchParams를 변경시키는 기능을 한다.
사용을 해보기위해 버튼을 만들어서 시험해보면
버튼을 누르게되면 id=22&mode=dark 였던게 who=Hello999로 변경된걸 볼 수 있다.
searchParams는 작명은 원하는대로 해도된다.
- Page Moving (useNavigate)
useNavigate를 사용해보는것도 edit페이지 내에서 구현을 해볼건데
페이지 이동시에는 Link태그를 이용해서 했었어야했는데 여기서는 useNavigate를 사용하면
이것또한 이동이 가능하다.
구현을 해보면
홈으로 이동 버튼을 만든 뒤 클릭해보면 Home으로 이동하는걸 볼 수 있다.
useNavigate는 페이지를 이동시킬수있는 함수를 반환해주는데
그 함수의 이름을 navigate로 받아준 뒤 navigate의 인자로 경로를 작성해주면
경로를 옮겨줄 수 있다.
이러한 기능은 언제 사용을 하게되냐면
로그인을 하지않은 사용자가 마이페이지 같은 로그인을 했을때 들어갈 수 있는 페이지로 가려할 때
로그인 값을 검사를 해서 로그인페이지로 보내는 용으로 사용한다.
그리고 뒤로가기버튼도 구현이 가능하다.
-1만 넣어주면 뒤로가기가 작동된다.
인터넷창 왼쪽위의 뒤로가기버튼과 똑같은 기능임.
