공부하는 블로그

Router Props 브라우저와 리액트앱의 라우터를 연결하게 되면 그 결과 라우터가 history api에 접근할 수 있게 되며 각각의 Route와 연결된 컴포넌트에 props로 match, location, history라는 객체를 전달하게 된다. import React from 'react'; import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom'; import Home from './components/home'; import Community from './components/community'; import Mypage from './components/mypage'; function App() { retu..

이전 포스팅에서 SPA의 한계를 극복하고자 라우터를 이용하여 경로에 알맞은 컴포넌트를 불러오는 방법에 대해 공부했다. React | Router : URL로 페이지 접근하기 Single Page Application(SPA) SPA는 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 컴포넌트를 통해 동적으로 다시 작성하여 클라이언트와 소통하는 웹 애플리케이션이다. 필요한 모든 소스.. gongbu-ing.tistory.com 라우터를 이용하여 경로를 설정할 수 있으니 이제 url로 파라미터를 전송하는 것이 가능해진다. path와 query string을 이용하여 파라미터를 전송하여 라우팅된 페이지에서 해당 파라미터를 받아서 사용해보자. Path를 이용한 파라미터 전송(match) 전송 방법..

Single Page Application(SPA) SPA는 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 컴포넌트를 통해 동적으로 다시 작성하여 클라이언트와 소통하는 웹 애플리케이션이다. 필요한 모든 소스는 하나의 페이지에 불러와진 후 페이지의 새로고침 없이 동작하게 된다. 그러나, SPA를 기반으로 개발할 때 흔히 겪는 어려움 중 하나는 웹페이지의 라우팅이다. 기본적으로 SPA에서 라우팅을 구현하게 되면 url path가 아닌 현재 어떤 컴포넌트가 렌더링 되어야 하는지 state를 통하여 관리를 한다. 이렇게 되면 다음과 같은 문제가 발생하게 된다. 1. 컴포넌트가 전환되어도 브라우저 주소창의 URL은 고정되어 있기 때문에 특정 페이지에 대한 즐겨찾기 등록이 불가능하다. 2. 뒤로가..

Routing 라우팅(Routing)은 URL 및 특정 HTTP 요청 방식(GET, POST)에 대한 클라이언트의 요청에 응답하는 방법을 선택하는 것이다. 각각의 라우터(Router)는 하나 이상의 핸들러 함수를 가질 수 있다. 만약 다수의 핸들러 함수를 지정해주려면 함수의 로직 끝에 꼭 'next()'를 붙여주도록 하자. 라우터를 정의하는 기본적인 방법은 요청 방식에 따라 'app.get()' 또는 'app.post()'이다. 두 메소드는 경로(path)와 핸들러 함수(handler funtion)을 파라미터로 받는다. // 여기서 app은 express의 인스턴스 app.get('/', function(req, res) { res.send('GET request to the root'); }); ap..