react-redux-dom
- 페이지를 구현할 수 있게 해주는 패키지
설치하기
yarn add react-router-dom 명령어로 설치
사용하기
- 페이지 component를 만들어준다.
- router.js를 만들어서 router 설정코드 작성
- app.jsx에 import하고 이것을 적용해본다.
- src에 pages 폴더 만들기
- pages 폴더 안에 생성할 페이지.jsx 만들어준다.
- 각 페이지마다 컴포넌트 템플릿을 적용해준다.
이런 식으로 말이다. - src 안에 shared 폴더 생성
- shared 폴더 안에 Router.js 파일 생성
- Route 뼈대 생성
- 각 페이지 import 하기
- Routes 컴포넌트 안에 각 페이지 route들 추가해주기
어.. 이 코드 어디서 많이 봤는데..
지옥이였던 파이어베이스 프로젝트때 신물나게 봤던 router가 이 router였구나..
- app.jsx 에서 Router를 import 해오고 return에
<Router />를 추가해준다.
app.jsx에 router 컴포넌트를 넣는 이유 :
app.jsx가 현재 최상위 컴포넌트이기 때문이다. 어떤 화면을 띄우건 항상 app.jsx를 거쳐야 한다.
끝
react-router-dom Hooks
useNavigate
- 다른 페이지로 보내고자 할 때 사용하는 hook
- 보통 어떤 버튼이나, 컴포넌트를 눌렀을 때 페이지 이동하게 되는데 그럴 때 사용한다.
- home에서 works로 보내보겠다. 그러려면 Home,jsx에 아래 코드를 작성한다.
useLocation
- 현재 위치하고 있는 페이지의 여러가지 정보를 추가적으로 얻을 수 있다.
- 이 정보들을 이용해서 페이지 안에서 조건부 렌더링에 사용하는 등, 여러가지 용도로 활용할 수 있다.
이렇게 코드를 구성하면 아래와 같이 나온다.
Link
- hook은 아니지만 중요한거라서 알려준다고 한다.
- a(앵커)태그를 대신하는 컴포넌트 인 것 같다.
- 반드시 a태그 대신 link를 사용하여야 한다는데, 그 이유는 a태그는 브라우저가 다른 페이지로 이동하면서 "새로고침" 이 일어나기 때문이라고 한다.
- spa는 새로고침이 적으면 적을수록 좋다고 한다. 실제로 이전에 파이어베이스+spa 프로젝트 구현할 때 새로고침이 많이되어 피드백을 받은적이 있었다.
- 새로고침이 되면 안되는 이유 :
1.모든 컴포넌트가 다시 렌더링 됨
2.redux나 useState를 통해서 메모리 상의 구축해놓은 모든 상태값이 초기화 됨
이는 곧 성능에 악영향을 줄 수 있고 불필요한 움직이다.
works 페이지에 contatc 페이지로 이동할 수 있는 링크가 생겼고, 누르면 새로고침 없이 스무스하게 넘어간다.
번외: props children
- 어떤 컴포넌트들은 어떤 자식엘리먼트가 들어올지 미리 예상할 수 없는 경우가 있다.
범용적인 박스역할을 하는 사이드바, 또는 다이얼로그와 같은 컴포넌트에서 특히 자주 볼수 있다.
여기에서 말하는 범용적인 박스 역할을 하는 컴포넌트란, 크게봤을 때 layout 역할을 하는 컴포넌트 라고 생각해 볼 수 있다.
props children 공부를 더 하다 보면, 컴포지션 이라는 말을 많이 보게 될건데 컴포지션은 "합성" 이라는 의미가 있다.
이제 props children을 이용해 layout페이지를 만들면서 개별적으로 존재하는 Header Footer 페이지를 "합성"해서 내가 의도하는 UI를 만들어주는 layout component를 만들어보려고 한다.
- shared 폴더에 Lyaout.js 파일 생성
- Layout.js에서 간단한 Header, Footer 컴포넌트를 만들어줌
17번 라인에 구조분해할당으로 children을 넣어주고,
21번 라인에서 Header 와 Footer 컴포넌트 사이에 {children}을 넣어줬다.
이렇게 해주면 어떤 페이지로 가던지 동일한 header와 footer가 붙어있는것을 볼 수 있다.
Dynamic Route
- 동적 라우팅이라고도 말하는데 path에 유동적인 값을 넣어서 특정 페이지로 이동하게끔 구현하는 방법
- 예를들어 works페이지에 여러개의 work가 보이고, work마다 각각의 페이지를 가질 수 있도록 구현한다.
<Route path="works/:id" element={<Works />} />
이 코드를 Router에 추가해줬다.
뒤에 :id 가 동적으로 url이 생성될 수 있도록 만들어주는 문구이다.
- 이 아이디에 들어있는 값은 useParams hook에서 조회를 할 수 있는 값이 된다.
스샷처럼 works의 100번째로 들어가도 잘 접속이 된다.
useParams을 통해 dynamic route에서 path에 입력된 아이디 값 가져오기
router.js
이제 works 페이지에서 해당 링크들을 클릭하면, 각각의 페이지들로 잘 넘어간다.
정리
- react-router-dom을 이용하면, SPA 기반 인 리액트 프로젝트 안에서 여러개의 페이지를 구현할 수 있다.
Router.js에 Route 설정에 관련된 코드를 작성하고, 최상위 컴포넌트인 App.js에서 import 해서 사용한다.- react-router-dom는 여러가지 훅을 제공한다
- react-router-dom을 통해 Dynamic Route를 설정할 수 있다.
- Dynamic Route를 설정할때는
:id로 설정하고, id 값은 useParams을 이용해서 각 컴포넌트에서 조회할 수 있다.
프론트엔드 지망생