반응형 리액트 (React)/Route, Redux10 리액트에서 라우팅 처리 - 잘못된 주소 처리 잘못된 주소 처리 - 웹페이지 개발자가 미리 정하지 않은 주소로 들어온 경우를 다루는법 1. NotFound.js 파일을 만들고 빈 컴포넌트를 생성 import React from "react"; const NotFound = (props) => { return 주소가 올바르지 않아요!; }; export default NotFound; 2. App.js에서 불러옵니다. import NotFound from "./NotFound"; 3. Switch로 Route를 감싸준다. 4. NotFound컴포넌트를 Route에 주소 없이 연결 5. 편의성을 위한 NotFound에 뒤로가기 버튼 생성 - NotFound 에서는 이미 history가 자동으로 넘어와진다. - 하지만 일부러 넘기려면 아래처럼 코딩한다. .. 2021. 9. 3. 리액트에서 라우팅 처리 리액트 라우터 설치 & 적용 - 리액트에서 라우팅을 처리하기 위해 라우터를 설치해주자 리액트 라우터 설치 & 적용 0. 필요한 패키지 찾는법 npm Bring the best of open source to you, your team, and your company Relied upon by more than 11 million developers worldwide, npm is committed to making JavaScript develop.. 5sangs.tistory.com 리액트 페이지 전환 기능 만들기 1. index.js에 Browser Router 적용하기 import {BrowserRouter} from "react-router-dom" ReactDOM.render( , documen.. 2021. 9. 2. 리액트 라우터 설치 & 적용 0. 필요한 패키지 찾는법 npm Bring the best of open source to you, your team, and your company Relied upon by more than 11 million developers worldwide, npm is committed to making JavaScript development elegant, productive, and safe. The free npm Registry has become the center of Java www.npmjs.com - 위 사이트에서 필요한 패키지를 검색해보자 - 보통 상위에 노출되는 것을 사용하면 된다. - npm을 이용하여 설치하는 방법이 나와있다. - 자신이 yarn을 이용한다면 패키지 이름만 가져오면.. 2021. 9. 2. SPA & 라우팅 기본개념 Single Page Application 이란? - 서버에서 주는 html이 1개 뿐인 어플리케이션. - 전통적인 웹사이트는 페이지를 이동할 때마다 서버에서 html, css, js(=정적자원들)을 내려준다면, SPA는 딱 한번만 정적자원을 받아온다. - 페이지를 이동할 때마다 서버에서 주는 html로 화면을 바꾸다보면 상태 유지가 어렵고, 바뀌지 않은 부분까지 새로 불러오니까 비효율적이다. - 사용자가 회원가입하다가 적었던 내용이 날아갈 수도 있다. - 블로그같은 경우, 페이지마다 새로 html을 받아오면 바뀐 건 글 뿐인데 헤더와 카테고리까지 전부 다시 불러와야 한다. → 많은 이유가 있지만, 그 중 제일 중요한 건 사용성 때문. 단점 - 사용자가 안들어가 볼 페이지까지 전부 가지고 온다. - 한 .. 2021. 9. 2. 이전 1 2 다음 반응형
