# react router dom
[React] React-router-dom
패스트캠퍼스 고성능 대규모 프론트엔드 10개 프로젝트: 최적화부터 유지보수까지 한 번에 끝내는 초격차 패키지를 수강하고 정리한 내용입니다. Routing 라우팅: 사용자의 요청에 따라 적절한 컴포넌트를 랜더링하는 것 즉, 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것 이러한 라우팅을 구현하기 쉽도록 하는 것이 react-router-dom > - React-router-dom: React앱의 라우팅 처리를 위한 라이브러리 React의 react-router 라이브러리 기반으로 만들어짐 React-router-dom: React앱의 라우팅 처리를 위한 라이브러리 React Router는 새로운 페이지를 로드하지 않기 때문에 불필요한 렌더링을 막을 수 있음. npm 또는 yarn을 통해 간단한 설치가 가능 실제 사용
[TS] '"react-router-dom"' has no exported member named 'createBrowserRouter'. Did you mean 'BrowserRouter'? 오류 해결하기
문제 이 오류는 최신 버전의 react-router-dom과 @types/react-router-dom을 사용하며 맞닥뜨리게됐다. typescript 환경에서는 타입선언된 모듈을 제공해야하니까 @types 관련 패키지를 설치해줬다. Outlet은 잘 가져오지만 그외 최신 기능들이 위의 오류 메시지처럼 타입을 찾지 못하고있다. 원인 결론부터 얘기하자면 @types/react-router-dom는 2년 후를 기점으로 업데이트 되지않고 있어 최신 기능의 react-router-dom에 대한 타입 정의가 없는 것이 원인이다. 원인을 찾을 수 있었던 과정을 보자. mac 환경에서 command + 왼쪽 마우스를 클릭하면 모듈이 참조하고있는 파일로 이동할 수 있다. 그 파일에는 오류 메시지에 있는대로 오류가 발생한 기능들을 찾을 수 없었다. 이전 type 패키지를 설치했나 싶어서 공식문서를 봤는데 그건 또 아니였다. 가장 최신 버전이 설치돼있었다. 이 type 패키지를 적용할
React Router
React Router란? > React에서 CSR 기반의 페이지 라우팅을 할 수 있게 해주는 라이브러리이다. 단일 페이지로 이루어진 SPA 방식의 React는 페이지를 이동하기 위하여 Router를 사용해야한다. 1. React Router 기본 사용 방법 1) React Router 설치 터미널에 아래 코드를 입력하여 라우터를 설치할 수 있다. @6은 버전을 의미한다. 설치확인 package.json 파일에서 react-router-dom이 정상적으로 설치되었는지 확인한다. 2) React Router 불러오기 메인 컴포넌트가 될 App.js에 react-router-dom를 import 한다. BrowserRouter, Route, Routes 모두 라우터에 필요한 기능이므로 import 해준다. 3) Routes 만들기 BrowserRouter, Route, Routes 를
[E-commerce PJT]_기본 세팅 및 스켈레톤 페이지 생성하기 - 1
⭐ 사이드 프로젝트 시작 말은 E-commerce PJT 라고 거창하지만, 그냥 쇼핑몰 웹사이트를 만들어 보는 것이다. 다만 최대한 백엔드와 프론트엔드 모두를 구현해보려고 한다. 이번에 현대오토에버 이커머스에 지원하면서, 이커머스에 지원했지만... 해당 도메인과 관련된 경험을 해본 적이 없었다. 예상대로 서류 및 코테 탈락을 겪으면서 경험부족에 대한 확신을 가지게 되었다. 물론 코테도 3문제 중 2솔이라서 좀 아쉬운 부분이 있다. 아무튼 이력서를 계속해서 지원하는 동안 코딩을 놓기에는 내 손가락이 공허하고 심심해서 과제테스트가 없는 동안에는 계속해서 진행해볼 생각이다. 📃 작성 코드 및 해석 1. 목표 - 기본 세팅을 yarn 으로 해보기 - Next.js 라우팅 구조로 Pages 폴더와 index.tsx 파일의 형태로 디렉토리 구조를 형성 - fake API 사용 **- React-Query 사용에 queryClient 세팅 해
[React] React-Router-Dom v6 주요 기능들
React-Router-Dom을 사용하다보면 필요할 때마다 문서에서 가져다쓰는 경우가 많다. 왜 써야하는지 모르고, 쓰라고하니 쓰는 것과 같은 수동적인 개발 방식은 좋지 않은 학습 방법이다. 또한 그러다보면 유용한 기능들이 있는데 놓치게되어 쓰던 것만 쓰게되는 상황이 발생한다. 주도적으로 내가 자주 사용했던 React-Router-Dom 기능이 구체적으로 어떤 것이고, 또 다른 유용한 기능들은 어떤 것들이 있는지 정리하며 살펴보고자 한다. 참고로 React-Router-Dom v6.15.0 기준으로 작성했다. Router Route 정보를 통해 현재 url, 히스토리 관리 등을 수행한다. 이전 버전에서는 BrowserRouter, HashRouter 등을 이용해 라우터를 정의할 수 있는데, createBrowserRouter, createHashRouter를 사용하게되면 **[Data API](https://reactrouter.com/en/main/routers/pi
[감정 일기장] Page Routing
React SPA & CSR MPA (Multipage Application) 여러개의 페이지를 준비해놨다가 요청이 들어오면 경우에 따라 적절한 페이지를 보여주는 방식 SPA (Single Page Application) 단일페이지 어플리케이션으로, 페이지가 하나밖에 없는 간단한 어플리케이션 CSR (Client Side Rendering) 브라우저(클라이언트 측)에서 알아서 페이지를 렌더링하는 방식 
[월간기록]페이지 간 데이터 공유
1. 직장에서 코드리뷰(라고 불리기에는 한 달에 한 번)시간에 공유한 내용을 다시 정리한 글입니다. CSR환경에서 React-Router-DOM V5.X를 사용했습니다. UI는 Kendo UI를 활용합니다. 상황 > 특정 페이지로 진입 시 상태 설정과 뒤로가기 시 이전 페이지의 상태값 유지하기 관리자 페이지 리팩터링을 하면서 놓쳤던 페이지간 상태 공유를 개발해야 하고 다음 2가지 상황에서 적용을 해야했다. 특정 태그를 누룰 시 태그에 해당하는 검색 조건을 이동하는 페이지에서 받아서 검색 호출 목록 → 상세 검색 시 목록에서의 검색 조건을 기억하고 뒤로가기 시 검색 조건을 다시 불러오기 그러다가 어느 주말에 개발자 단톡에 올라온 Funnel 구조 이야기를 기점으로 현재 내 상황에 맞는 구조가 어떤 것이 있는지 생각을 해봤다. 생각해볼 수 있는 CASE Funnel 구조 <img src="https://velog.velcdn.com/imag
[redux 2탄] Redux 공부는 내가 했는데, 미니 프로젝트는 누가할래?
나지.. https://gazero-marvel.netlify.app/ Redux를 사용해서 간단한 Card App을 만들기 사용스택 및 라이브러리(React) react-redux & redux react-router-dom <span
[React] 쿼리(query) 매개변수(라우팅 보완)
표준 웹 개념인 쿼리 매개변수를 통한 라우팅 개념 보완해보려고 한다. 현재 로딩하는 양식에 따라 다른 정보를 서버에 보내고 있는 상황이다. (로그인 상태이면 '회원가입'텍스트 버튼 나오게, 회원가입상태이면 '로그인'텍스트 버튼 나오게) 위 로직에서 로그인 로딩상태에 따라서 양식이 다르고 이 다른 양식으로 서버에 보내는 상황에 쿼리를 사용해보아도 좋다. ✔️ 쿼리 매개변수 쿼리 매개변수란, > url에서 물음표 뒤에 붙는 매개변수인데 이 매개변수를 추가해서 정확히 어떤 컴포넌트가 주어지는지 정의할 수 있다. ex) /auth?mode=signup 쿼리를 썼을때 장점 : 해당 페이지를 회원가입 혹은 로그인 모드에 직접 연결할 수 있다는 것이다. 그러면 같은 페이지에 다른 UI가 렌더링 된 거라고 해도 사용자를 회원가입 페이지로 직접연결할 수 있다. *쉽게말해 페이지는 같지만 모드별로 양식이 다르게 나오게 되는것이다.
[React] 페이지이동(React-Router-Dom/Link, Route, BrowserRouter, Routes)
🐾 페이지 이동 >애초에 React는 Single Page Application (html 파일이 하나밖에 없기 때문에)이기 때문에 페이지 이동이라는 개념 자체가 존재하지 않는다. 따라서 주소가 안바뀌고, 뒤로가기 앞으로가기 불가능하다 🐾 React-Router-Dom > 페이지 이동효과를 주기위해 자주 사용되는 라이브러리 페이지 이동은 아니고, 단순히 주소에다가 글자를 추가해주고, 뒤로가기(history)에 이전 기록을 추가해주는 방법으로 사용자 입장에서 페이지 이동이 된것 처럼 효과를 낼수있다. react-router-dom설치(❗️ 라이브러리는 항상 공식문서 확인, 업데이트가 될수있음.) 🐾 Link 컴포넌트 d02router.js > html의 a태그는 절대 리액트에서 사용하지 않는다 `a태그의
React emotion & React-Router-Dom
출처 emotion css를 js로 만들 수 있도록 도와주는 라이브러리 styled 함수 import styled from "@emotion/styled"; 이전방식 div태그를 만들고, 클래스 이름이나 id 값을 설정한 후에 css 파일에 선택자 { 적용시킬 디자인; } 으로 작성을 했음 --> 클래스이름 및 아이디 이름 설정의 어려움 --> 선택자를 똑같게 설정했을 경우 의도치 않은 스타일이 적용 emotion styled 방식 css가 적용된 유일한 div 태그를 만들면 되지 않나? let Abc const Abc = styled.divcss문법;; // 아래와 동일 const Abc = styled.div('display:flex;'); Q. 함수 실행 결
[React] 리엑트 라우터 action
좋다. 앞전의 loader 1과 loader 2에서 많은 데이터를 loader를 통해 로딩하고 패칭하여 접근까지 하는 방법을 살펴보고 학습했다. 이제는 데이터 패칭만이 아닌 사용자가 직접 어떤 양식이나 데이터를 보내보는 방법을 살펴볼 차례이다. (post 혹은 put/patch) ✔️ 데이터 서버로 보내기 새롭게 만들어진 혹은 입력받은 데이터를 서버로 보내기 위해선 우선 양식이 필요할것이다. NewEventPage.js 이 페이지는 사용자가 입력한 새로운 데이터들을
[React] 리엑트 라우터 loader 2
react-router-dom에서 제공하는 아주 중요한 기능인 loader의 전반적인 개념과 기능은 리엑트 라우터 loader에서 살펴보았다. 이제 응답에대한 오류 처리와 더불어 조금 더 동적으로 라우터를 사용하는 방법을 알아보자. ✔️ 커스텀 오류를 이용한 오류 처리 기존 useEffect를 통해 수작업으로 오류를 처리하곤 했다. 이젠 loader를 사용해 처리하는 방법을 살펴보자 데이터를 컴포넌트에서 리턴하는 대신 loader로직 안에서 throw를 써서 오류를 낼 수 있다. 오류 생성자를 만들어 낼 수도있지만, 그냥 오류 객체를 리턴해도 좋다. 이렇게 던져주면 리엑트 라우터는 가장 근접한 오류 element를 렌더링 해준다. 라우터를 정의내
[React] 리엑트 라우터 loader
우선 react-router-dom은 우리가 SPA인 리엑트 웹 애플리케이션을 서버로부터 다중으로 많은 html페이지를 불러오지 않고도 인터렉티브하게 사용자에게 여러 페이지를 보여줄 수 있도록 도와주는 라이브러리이다. ✔️ loader() 사용하기 EventsPage.js 위 코드처럼 어느 한페이지에서 비동기로 http요청을 백엔드 api로 해야하는 로직이 항상 반복해야하는 상황이 생기기 마련이다. 이는 일종의 보일러 플레이트 코드라는 점을 파악 할 수 있다. 물론 커스텀 훅을 생성해 공통적으로 공유할 컴포넌트를 아웃소싱하여 적용가능하지만, react-router-dom이 제공하는 또다른 방법도 있다. > 바로 loader()이다. * ❗️ react-router-dom 버전 6이상 부터는 이 기능을 사용가능하다.* 그럼 위 http요청 보일러 플레이트 코드를 어떻게 하면 react-router-d
Link와 navigate의 차이점은 무엇일까? (react-router-dom)
react-router-dom >React-router-dom은 react를 개발하신 분들은 다들 라우팅을 할 때 사용해보셨을 것입니다! 저는 다양한 기능은 사용해보지 못했지만, 매번 쓸 때마다 Link, navigate는 무조건 사용했기때문에 간단하게 정리를 하려고한다. Navigate // Link 공식 사이트를 참고하였다. >### Link 컴포넌트 속성 Link는 컴포넌트이다. 새로운 페이지로 이동하게 하는 기본적인 라우팅 도구 페이지 전환을 위한 URL을 to 속성에 넣어주면 된다. >### 예시 이런식으로 하면 임시버튼을 클릭하면은 /가고싶은url로 이동을 할 수 있다. >### Link 특징 간단하고 직관
[23.08.02] 리액트 라우터 - useNavigate 로 데이터 보내고 useLocation 으로 데이터 받아오기 !
React-Router useNavigate (Hook) : useNavigate는 지정한 경로로 페이지를 이동시키는 기능과 두번째 인자를 통해 이동시킬 페이지에 보낼 데이터를 지정하는 기능도 가지고 있다. 1) 페이지 이동을 위한 경로 지정 - 지난 게시글 참고 [리액트 라우터 - useNavigate vs Link] * 2) 다른페이지로 데이터 보내기* - 두번째 인자에 state 속성을 이용해서 보내주면 된다. 사용방법 > > 
🚫 로그인 상태에 따른 접근 제한 구현 (+ 빈 페이지 설정)
로그인 상태에 따라 접근 제한 기능을 구현하고자 했다. >#### X 로그인 되지 않은 상태에서 접근 가능한 페이지 : 시작 페이지, 로그인 페이지, 로딩 페이지, 빈 페이지 O 로그인 된 상태에서 접근 가능한 페이지 : 나머지 모든 페이지 + 지정되지 않은 route에 접근하는 경우에는 따로 디자인한 empty page가 뜨도록 설정 1. 로그인 상태 확인 로그인 시에 localstorage에 access token을 저장하도록 설정해두었기 때문에 만약 localstorage에 토큰이 있다면 로그인이 되어 있는 것이고 없다면 로그인이 되어 있지 않은 것이다. 따라서 토큰 저장 여부를 통해 로그인이 되어있는지 확인해준다. 2. 로그인 상태에 따른 route 설정 로그인이 되어 있을 경우 Outlet을 이용해 지정한 라우트들을 렌더링 해주고, 로그인이 되어 있지 않을 경우 로그인을 하도록 로그인 페이지로 이동 시킨다. >
[Type Script] React-router-dom 사용 router설정시 에러
React-router-dom을 세팅하는 과정에서 src/shared/Router.ts 부분에서 다음과 같은 에러가 발생했다. 에러 에러는 `부터 `까지 발생한다. 에러메시지 > 'Routes' refers to a value, but is being used as a type here. Did you mean 'typeof Routes'?ts(2749) 해결 여러가지 시도해보고 계속 안 되다가 어이없게 해결했다. 바로 확장자를 .tsx로 바꾼 것이다. Router.ts -> Router.tsx
[23.07.26] 리액트 라우터 - React Router Dom
-React-Router-Dom이란? : 단일 페이지에 다중 페이지로 구현해주는 패키지. 페이지 간 이동이 가능해진다 ! > 설치하기 -사용방법 1. 페이지 컴포넌트들 작성. 2. Router.js 파일 생성. router를 구성하는 설정 코드 작성. (폴더구조 : src > shared > Router.js) 3. App.jsx(최상위 컴포넌트)에 Router import하고 `` 주입. 4. 페이지 이동 테스트 해보기 localhost:3000/home localhost:3000/about localhost:3000/contact -예시코드 Router.js
2023.07.06 reactRoute,Navigate
1.Routes 복습 저번에 사용했던 Routes 이다. 차이점은 Redirect이다. Redirect는 만약 로그인이 안되어있다면 Navigate 훅을 return한다. Navigate 훅은 to에 있는 경로로 강제로 이동시키는 훅이다 즉 Main 컴포넌트로 가게 된다. 2.useLocation, useParams, useSearchParams useLocation() 는 현재 주소의 도메인 뒷 부분을 다 갖고온다. useParams() 는 파람스로 준 주소를 key와 value형태로 반환시켜준다. useSearchParams()는 쿼리 형태로 된 url을 객체 형태로 반화한다. ?size=2 라고 쿼리값을 url로 보내면 query.get("size") 는 2가 된다. 3.느낀점 🖥️ 간단하게 route와 navigate를 알아보았다. 이미 했던 거지만 vanilla javascript만 쓰다 편하게