프로그래밍 공부 노트

어느 페이지에서 현재페이지로 왔느냐에따라 다르게 처리하고 싶은 경우가 있다. 이때 react-router-dom의 history.push()로 간단하게 처리할 수 있다. 일반적으로 react-router-dom으로 라우팅할 경우 아래와 같이 많이 작성한다. history . push ( ' /payment Page ' ) 하지만 간단하게 아래와 같이 작성하면 어느페이지에서 현재페이지로 왔는지 props를 넘겨주어 현재 페이지에서확인할 수 있다. history . push ( { pathname : " / payment Page " , state : { _id : " 0001 " , name : " detailPage " }} )  경로를 받아올 때는 history.location을 사용해서 pathname 값과 state값을 현재 페이지에서 받을 수 있다. 위 코드에대한 결과는 아니고 프로젝트에서 사용했을때 console.log()로 history.location을 확인해보면 아래와 같이 해당 페이지에서 경로와 값들을 받을 수 있는것을 확인할 수 있다. 나의 경우 프로젝트에서 결제페이지로 넘어오는 경로가 장바구니 목록에서 온것인지 아니면 상품을 바로 선택해서 결제페이지로 넘어온것인지에 따라 다르게 처리하는데 사용했다. 참고: https://stackoverflow.com/questions/44121069/how-to-pass-params-with-history-push-link-redirect-in-react-router-v4

리액트에서 페이지 이동 즉, 라우터를 사용하기 위해서는 react-router-dom 모듈 패키지를 설치를 해야한다. 리액트 라우터 설치 $ npm install react-router-dom react-router 도 설치해야 하지만, react-router-dom 패키지 내부에 react-router가 함께 설치되기 때문에  react-router-dom만 설치하면 된다. 여기서 한가지 알아야 할 점은 리액트에서 라우터는 실제로 페이지가 바뀌는것이 아닌 가상으로 바뀌는것으로 웹브라우저가 해당 페이지가 변경되었는지 인식하지 못 할 수 있다. 페이지 이동을 위해서 사용되는 라우팅 방법에는 몇가지가 있다.  그 중에서 많이 사용되는  BrowserRouter, HashRouter, Route, Link 에 대해서 공부해 봤다. 라우팅을 사용하기 위해서는  import { BrowserRouter , HashRouter , Route , Link } from 'react-router-dom' ; 해당 코드를 import 해야한다. import 한것들에 대해서 간단히 말하면 BrowserRouter와 HashRouter는 라우터 기능을 사용하게 해주는 큰 틀과 같은 역할을 하며 Route는 경로를 지정하고 해당 경로에 대한 출력 화면 즉, 컴포넌트를 설정할 수 있다. 마지막으로 Link는 a 태그와 같이 설정한 경로에대한 컴포넌트를 불러오도록 도와준다. import React from 'react' import { BrowserRouter , HashRouter , Route , Link } from 'react-router-dom' ; import LoginPage from './components/LoginPage' ; import MainPage from './components/MainPage' ; import RegisterPage from './