# react router
🐈 Adorable Cats - 고양이 정보 제공 페이지
📍Project Summery TheCatAPI를 활용해 고양이 정보를 불러와 종에 따른 고양이의 상세설명과 다양한 사진을 볼 수 있다. 로그인을 통해서 마음에 드는 고양이 사진을 mypage에 담을 수 있고, my page에 담긴 고양이 사진을 클릭하면 상세 정보

[ React ] React-Router Component & Hooks 까지 알아보자!
React-Router 사용자의 브라우저가 클라이언트 사이드에서 뷰 렌더링을 담당하도록 돕는 라이브러리 💡 서버 사이드 렌더링을 할 때에도 라우팅을 도와주는 컴포넌트들을 제공해준다. 라이브러리 설치하기 프로젝트 디렉토리로 이동하여 다음 명령어를 통해 리액트 라우터

[TIL] Router 부모-자식 상태 주고받기
React 상태관리를 이용해서 자식이 부모에게 데이터를 전달하는 방법은 미디엄 포스팅에서 작성했습니다. 이 포스팅이 위 링크와 다른점은 다음과 같습니다.1\. 함수 컴포넌트 사용2\. Router 사용매우 간단한 예제로 바로 알아보겠습니다. 포스팅에 필요하지 않은 모든

React-Router
🍒 React-Router react는 view만 담당하는 라이브러리이다. 그래서 라우팅을 담당하는 react-router를 따로 설치해주어야 한다 원래 싱글페이지 어플리케이션(SPA)는 주소가 없어 접속하기 힘들었지만 react-router를 사용하면 페이지를 깜

history.push() 사용시 새로고침 해야 이동되는 문제 해결하기 👊
개요 컴포넌트 단에서 페이지 처리를 하는게 아니라 리덕스의 js 파일 단에서 페이지 처리를 해야하는 상황! createBrowserHistory() 를 사용하면 리덕스에서도 페이지 처리를 할 수 있다기에 코드를 추가했습니다. history.js 부분 매번 reateBrowserHistory를 import 하는것은 번거로운 일이기에 유틸 파일을 만들어 사...
React Router
개인적으로 개념을 다지기 위한 리액트 라우터 첫번째 시간SPA(Single Page Application)에서는 사이트의 페이지가1개의 페이지로 일을 진행한다. 하지만 주소를 이동해서 다른 페이지를 화면에 보이게 하고 싶을 때 이 router를 사용하면 된다.react

TIL:: wecode 12
wecode 17일차 > 오늘은 react router 세션을 듣고 로그인 페이지 리액트로 옮긴 것처럼 메인 페이지도 리액트로 옮기도록 하겠다. (session) react-router / sass SPA(Single Page Application) SPA(Sin
동적 라우팅 & REST API
https://velog.io/@joonsikyang/React-Project-URL-parameters-Query-parametersspa에서 활용 필요상세페이지 이동 시 활용라우터에 연결되어 있는 component에서 this.props를 찍으면(react

React Router
React Router 각 컴포넌트마다 url주소를 가지게 하도록 하는 방법 설치 npx create-react-app react-router-example npm install react-router-dom BrowserRouter react router dom
정상 페이지 경로가 아닐 시 라우트 처리
https://ultimatecourses.com/blog/react-router-not-found-component
What is a state in <Link> component of React Router?
https://stackoverflow.com/questions/41736048/what-is-a-state-in-link-component-of-react-router현재 프로젝트에서의 코드 중이런 형태의 코드가 있었다.위의 답변이 도움이 되어 참고용으로 기
리액트를 다루는 기술 정리 (13)
기존 방식다른 페이지로 이동할 때 마다 새로운 html, 페이지 로딩 시 서버에서 리소스 전달받아 해석한 뒤 화면 보여줌사용자에게 보이는 화면은 서버 측에서 준비.유동적인 html 생성해주는 템플릿 엔진 사용서버 측에서 모든 뷰를 준비한다면 성능상의 문제가 발생바뀌지

React | Wanted 클론 프로젝트
프로젝트 소개 > 채용 플랫폼 서비스인 원티드(Wanted)를 기획/디자인을 제외한 주요 기능을 구현하였습니다. 👩🏻💻 👨🏻💻 Team Winted ◼️ FrontEnd 김수연 / 민지연 / 김한나 / 김한나 ◼️ BackEnd 김형욱(Product
[TIL] React-Router Hooks
: 기존 <Route>로 사용되지 않은 컴포넌트에서 match, location, history 객체에 접근하려면 withRouter HOC로 컴포너트를 감싸줘야 했다. v5.1 부터 useParams hook이 추가되면서 match.params 객체에 접근할 수

React 입문(9) : React-Router(2) (last update: 2020.12.28.)
Notion의 Theory & Technique : React.js 페이지 바로가기라우트의 경로에 특정 값을 대입하는 방법은 두 가지가 존재한다: 1. params 2. query를 사용하는 것이다. 먼저, route로 설정한 컴포넌트는 3가지의 props를 전달받게

TIL 9
SPA (Single Page Application) - 페이지가 한 개인 애플리케이션Westagram-frontend : login.html, main.html - 페이지 수만큼 html 파일이 존재리액트 프로젝트에서 .html 파일의 개수는? 1개 >>> SPA(S

history.push()로 페이지 이동시 props 넘겨주기
history.push() router 이동시 전 페이지에서 이동할 페이지로 props 넘겨주는 방법