오늘 배운 것은 리액트 라우터!!
사실 JSX에 익숙해지기도 전에 벌써 페이지 이동을...??
나 이래도 되는걸까..?
지금까지 앞에서 JSX를 쓰는법과,
구조를 나눠서 작성하는 컴포넌트까지 배웠다.
이제 그 컴포넌트들을 연결해서
페이지 이동을 시켜봐야 하지않겠나!??
🔗 라우팅..?? 샤우팅은 알아도 라우팅은 뭐야...
누가 나에게 라우팅이 뭐야?? 라고 물었을 때
나는 이렇게 대답할 것 같다.
- 사용자가 요청을 한 URL에 따라
해당 URL에 맞는 페이지를 보여주는 것 - 리액트 라우터는 라우팅을 하기 위한 사용도구!! 라고 생각
일단, 라우팅이 왜 필요한지 알아야 쓰지...
그걸 알기 위해서는 SPA에 대해 알아야한다.
리액트는 SPA (Single Page Application)이다.
싱글 페이지 어플리케이션...??
싱글...이라네요 리액트도..
그래서 SPA가 뭐냐!!!
- 기존 웹페이지 처럼 여러개의 페이지를 사용하거나,
새로운 페이지를 로드하는 방식이 아니다. - 새로운 페이지를 로드하지 않고
하나의 페이지 안에서 필요한 데이터만 가져오는 형식.
아니 쉽게좀 설명해줘....
지금까지의 웹페이지의 구조는 여러 페이지로 되어있어서
유저가 URL을 요청하면, 요청할 때마다
페이지가 새로고침되어서 계속 새로 렌더링을 해주었다.
하지만 속도측면에서나 트래픽 측면에서나
너무나 느리고 낭비가 되기 때문에!
리액트는 먼저 맨처음에 쫙~~렌더링을하고,
그 다음에 필요한 데이터만 전달받아 보여주는 식인 것이다.
⭐️ 결론은!! SPA인 리액트를 라우팅 하기 위해서는
리액트 라우터 라는 라이브러리를 사용한다는 것이다.
그럼 리액트를 라우팅하기 위해서
리액트 라우터를 사용하는 건 알겠어!!
⚒️ 그럼 리액트 라우터는 어떻게 써...??
먼저, 리액트 프로젝트를 생성하셔야겠쥬??
$ npx create-react-app 폴더이름
그 다음엔 리액트 라우터는 라이브러리니 까
설치를 따로 해줘야겠죠??
$ npm install react-router-dom
이것만 터미널에 쳐준다면!?? 설치 완료!!
프로젝트 폴더안에 package.json에
react-router-dom과 버전이 보인다면 설치 성공~!
그럼 써보도록합싀당~~!
📃 예시로 맛집 정보 웹페이지라고 생각해보고 만들어보자!!
먼저, 라우터를 사용하지 않고, 페이지만 만들어보자!!
그럼 컴포넌트가 어떤게 필요할까??
- 최상위 컴포넌트로 쓸 App컴포넌트,
- nav,title 이 들어갈 Header 컴포넌트,
- 맛집들이 있을 Main 컴포넌트,
- 맛집의 상세 정보들이 있을 Place 컴포넌트
이렇게 4개를 한번 만들어보자!!
1. App.js는 컴포넌트 3개 (Header, Main, Place) 세 개를
import해와서 병합해서 최종페이지를 나타낸다.
2. Header.jsx 는 Title과 Navbar가 들어갈 자리이다.
3. Main.jsx는 맛집들이 주루루룩 나열될 자리이다.
4. Place.jsx는 맛집의 상세정보들이 들어갈 자리이다.
3개의 자식 컴포넌트(Header, Main, Place)에서 export 한것을
App.js가 import로 받아와서 페이지를 렌더링 해준다.
렌더링 결과는 다음과 같다.
지금까지는 헤더, 메인페이지, 맛집상세정보 페이지들이
같이 쭈루룩 보이게 된다.
하지만 여기서 Router를 사용하면 어떻게 될까!??
1. App.js
<BrowserRouter> 태그로 컴포넌트를 감싸준다.
<BrowserRouter> 태그는 리액트 라우터 돔을
적용하고 싶은 컴포넌트의 최상위 컴포넌트를
감싸주는 래퍼 컴포넌트이다.
여기서 Header 컴포넌트는
모든 URL에서 공통으로 적용할 것이기 때문에
<Routes>태그 밖으로 빼내준다.
2. Main.jsx
Main 모듈엔 특정 맛집 상세 페이지로 이동하는 링크를 추가
3. Header.jsx
Header에는 h1태그의 컨텐츠를 클릭하면
처음 페이지 "/" 로 이동할 수 있게 링크를 추가
4. NotFound.jsx
갑자기 이건 어디서 나왔냐구요..?? 이건
App.js에서 보시면
라우트에서 정의하지 않은 경로 접속시 따로 처리를 해주는
컴포넌트로 추가해준 것이다.
다른 컴포넌트들과 똑같이 만들어주고 export 해주면된다!
아래처럼 정의 되지않는 경로로 접속시
404 Error가 뜨게 된다.
렌더링 결과는 다음과 같다!!
아래와 같이, 1번 맛집, 2번맛집을 누르게 되면 Link를 통해
to뒤에 있는 경로로 새로고침 없이 이동을 한다.
또한, Header 컨텐츠를 누르면 Link의 경로 to뒤에 있는
경로 "/" 를 통해 첫 화면으로 새로고침 없이 이동한다.
⚙️ <BrowserRouter>, <Routes>, <Route>, <Link>
사용법과 어떤 기능을 하는지 살펴보자
BrowserRouter : BrowserRouter는 HTML5 History API를
사용하여 URL과 UI를 동기해주는 <Router>이다.
한마디로, 페이지를 새로고침 하지 않고도
주소를 변경할 수 있도록 해주고,
현재 주소에 관련된 정보를 props로 조회 및 사용을 가능하게 함.
Routes, Route : Routes는 여러 Route를 감싸서 그 중 규칙이
일치하는 라우트 단 하나만을 렌더링 시켜줌.
Route는 path속성에 경로, element속성에는 컴포넌트를 넣어,
경로와 그 경로에 들어갈 컴포넌트를 정해준다.
<Route path= "/이동할 주소"
<출력할 컴포넌트 />
<Route/>
Link : History API 를 통해 브라우저 주소의 경로만 바꿔준다.
to속성에는 경로를 작성하고, 열고닫는 태그 사이에는
클릭할 요소를 넣어주면된다.
<Link to = "이동할 주소">
클릭시 to의 주소로 이동함
</Link>
🚨 여기서 a태그 대신 Link를 사용하는 이유!!
페이지가 리로드 되지 않고 현재 페이지에서의 상태를 유지한 채,
주소에 따라 해당 화면을 보여줘야 하기 때문
하지만 a태그는 기본적으로 페이지가 완전히
새로고침 되기 때문에 절~~~대!! a태그를 쓰면안된다!!
URL을 파라미터, 쿼리스트링을 통해 유동적으로 동작할 수도 있는데
useParams라는 훅을 사용해야 하므로 훅을 대충 배우고 다시 포스팅하겠다.
그대신 useNavigate라는 훅은 간단하니 한번 봐보자!!
useNavigate :
Link 컴포넌트를 사용하지 않고 다른 페이지로
이동을 해야하는 경우 사용을 한다. (ex. 뒤로가기)
위에서 보면, useNavigate도 리액트 라우터 라이브러리이다.
각각 뒤로 가기, 앞으로 가기, 첫화면 가기 라는 버튼을 클릭시
각각 navigate(숫자)이면 -는 뒤로, +는 앞으로 간다.
navigate("경로")일땐 그 경로로 이동한다.
