[React] 리액트 라우터!
상세 페이지 같은 경우
주소를
/detail 로 접속을 하면 상세페이지를 보여주고
/cart로 접속하면 장바구니 페이지를 보여줍니다.
리액트 미사용시 페이지를 이동할 때는
1.html 파일을 만들어서 상세페이지 내용을 채운다.
2.누가 /detail로 접속하면 html 파일을 보내서 html 페이지를 바꿔준다.
리액트 사용시 페이지 이동할 때
리액트는 single page application (SPA) 이라고 해서
HTML을 한페이지만 사용한다.(Index.html)
1./detail 페이지를 컴포넌트로 만들어서 미리 디자인해놓는다.
2. 누가 /detail로 접속하면 기존의 html을 비우고 거기에 /detail 컴포넌트를 화면에 보여준다.
이러한 상황에서 한 화면에 어떠한 컴포넌트를 보여주고 안보여주고를 조건문 등으로 결정하기에는
코드도 길어지고 복잡해진다.
그렇기 때문에 react-router-dom 이라는 라이브러리를 사용해 준다.
react- router-dom 라이브러리를 만나기 전에!!
SPA를 짧게 공부해보고 가자!
SPA란 ?
SPA는 단일 페이지로 구성된 웹 애플리 케이션을 말한다. SPA 가 등장하기 전 웹 에플리 케이션을 구성하던 방식인
서버사이드 렌더링(SSR)의 경우, 화면에 보여질 리소스를 서버로 요청하고, 서버로 부터 받아온 리소스를 렌더링 했다.
하지만 SPA의 경우 클라이언트 사이드 랜더링(CSR)의 방식을 사용한다. 렌더링의 역할을 서버에 넘기지 않고 브라우저에서 처리한다. 웹 어플리케이션을 필요한 모든 정적리소스를 최초에 한번 다운로드 하고 이후 새로운 페이지 요청시 페이지 갱신에 필요한 데이터만을 전달받아 페이지를 갱신한다.
예전에 강사님이 수업시간에 간단하게 설명한적이 있던 CSR과 SSR의 차이를 기록한 적이 있다!
클라이언트 사이드 랜더링/서버 사이드 랜더링 차이 (tistory.com)
클라이언트 사이드 랜더링/서버 사이드 랜더링 차이
서버사이드 랜더링 클라이언트 사이드 랜더링 클 사 랜 의 장점 서버에서 하나의 API를 만들어 놓으면 클라이언트가 리액트는 뷰든 앵귤러든 안드로이드 IOS 든 여러가지 다양한 종류의 프론트
devdreamer.tistory.com
다시 이어서 ! 리액트 라우터 돔을 다운받아보자.
npm install react-router-dom
yarn add react-router-dom을 터미날에 쳐준다.
라이브러리를 사용할 때에는 구글에서 사용법을 그때 그때 익혀주면된다.
react-router-dom 라이브러리를 깔았따면 index.js파일에 들어가서
<App/> 을 BrowserRouter 로 감싸주면 된다.
이러면 기초적인 react-router-dom 의 사용 준비가 끝났다.
이제 react-router-dom을 사용할 곳에서 몇가지 컴포넌트를 import 하고 사용하면 된다,
사용할 곳에
Routes , Route, Link 를 import 해주자.
일단 Routes로 외곽을 감싸고 그 안에 Route 를 넣어준다
Route에서 접속할 곳의 주소를 path="/주소" 를 입력해주고
element={} 넣고자 하는 화면의 컴포넌트드를 만들거나 넣어준다.
detail을 벗어나면 다시 상세페이지임이 사라진다. 이러한 방식으로 페이지를 나눈다
path에 아무것도 적지 않으면 main페이지이다.
아래의 상품 정보를 detail에서는 못보고 main 에서만 보고 싶다면???
<Route path = "/" element={
상품정보들
}
기존 바깥에 있떤 상품정보 컴포넌트를 element ={} 이 안에 넣어주면 된다.
마지막으로 배워야 할것!!
페이지 이동 버튼!! 이 버튼은 Link 태그 기능을 이용해야한다.
(react-router-dom 라이브러리에서 import 한거임)
이렇게 해놓으면 홈이라는 링크를 클릭하면 "/" 로 이동
상세페이지를 누르면 "/detail" 로 이동한다.
react-router-dom 을 배웠으니 이제 싹 이사를 해보자.
App.js 에는 어떤 페이지가 있는지 알려주는 정도로
Routes 와 Route 만 남기도록 한다.는 Nav bar 는 나중에 옮기자. 강사님이 뭘 하실수도 있으니까
일단 우리가 사용할 페이지들 혹은 데이터를 한 폴더에 모아뒀다.
일단 detail 은 home에서 사용하니까 그곳으로 임포트 해주고 위와 같이 파일을 만들어 필요한 값들을 옮겨주었다.
이제 react-router-dom이 쓰인 부분을 보자.
각각의 페이지들을 일단 import 해준다
Routes 부분과 Route 부분을 확인해 보면
각 임포트한 컴포넌트(첫글자 대문자) 들을 element에 넣어주고 주소를 지정해주었다.
출처 : 코딩애플 React 강의입니다.
스스로 생각해서 코드를 직접 짜보게끔 많이 유도해주시고 강의 설명도 이해가 쉽게 설명해주십니다.