우리 쇼핑몰이나 뭐 웹 보면 상세페이지부터 주문하는 페이지 여러가지 나뉜다
본격적으로 페이지를 나누는법을 알아보자
일단 터미널에 라이브러리부터 깔자
이렇게하면 손쉽게 설치가 끝 !
index.js로 가서 이렇게 그대로 작성해준다 보통 경로에 ./ 가 없고 이름부터 시작한다 하면
라이브러리 라고 생각하면 된다 !
이렇게 사용할수 있어진다 앞으로
라우터는 2가지 방법으로 보통 할수있는데
해쉬라우터가 조금 더 안전하게 라우팅 할 수 있다고 한다 
서버로 전달이 되지않기 때문에 리액트가 안전하게 페이지를 처리할수잇다
브라우저 라우터를 쓰면 가끔가다 "어 그런페이지 없는데요" 하면서 서버에 연결할수 있기 때문에 서버 라우팅을 방지하는 API를 작성해둬야함
자 이제 Route (페이지 나누기) 를 해보자
이렇게 상단에 적어주자, 각자의 기능은 추후 설명하겠다
app.js로 돌아와서 저렇게 Route라고 적고 path라는 속성을 주게되면
path안에 속성값이 나눠진 페이지의 경로가 된다.
html을 줄줄이 적지않고 컴포넌트에 담아서 쉽게 보여줄수도 있다. 
근데 입력했던것들이 다 중복되서 나오는데요?
리액트 라우터는 경로가 매칭되는 것들은 전부 보여준다, 예를들어
1번 Path에는 : "/" 로 넣었고
2번 Path에는 : "yes"로 넣었다면
/yes를 하면 1번,2번 페이지가 같이 한 화면에 나오게된다는 말임
exact를 넣게되면, 경로가 정확하게 일치할때만 페이지를 연결해준다
이제 app.js에서 우리가 짜놓은 html을 페이지에 나눠서 넣어보고, 축약해보자
내용이 너무 길다면 컴포넌트화 시켜도 된다
상세 페이지는 컴포넌트화 하자, function 해서 만드는거 아시죠?
요고요 요고 ! 근데 이거 파일안에 여러개 있으면 또 보기 좀 그러니까 다른 파일에 컴포넌트 들만 모아서 빼보자구요 ! 저번에 쓴 import / export deafault 그대로 쓰면 됩니다
리액트 라우터의 특징
페이지마다 다른 html 파일이 아닙니다 !! 우리가 명령을 내려서 갈아치워주세요 ! 하고 path로 값을 넘기는거지 다른 파일이 아닙니다 !!
이렇게 디테일 페이지 컴포넌트를 하나 만들어주고, 이걸 그대로 잘라내기 해주세요
그리고 src 폴더에 Detail.js라는 파일 하나 만들어주고 요깃다가 넣어주자.
보통 컴포넌트 파일들은 대문자로 시작하고,파일도 컴포넌트 이름하고 똑같이 지어주자
컴포넌트 파일 만들때는 그 해당파일에도 꼭 상단에 이렇게 추가를 해주는걸 잊지말자
Detail.js 파일에서 이제 컴포넌트를 만들었으니 우리가 늘 하던대로 export default를 마지막에 해주어야하는데, 맨 뒤에는 변수명이 와야하지만 함수명 그대로가 들어와도 된다.
export default Detail; 이렇게 적으면 이제 슝 내보낼수 있다
그러고 이제 다시 app.js에 와서 그대로 import 해주자 이거를 보통 모듈화 라고 하기도함.
그래서 보통 src 폴더 안에 컴포넌트만 모아둔 또 다른 폴더를 만들기도함 거기에 컴포넌트20개,30개 등등 다 모아서 관리를 하게됨
이제 저기 버튼을 누르면 페이지를 이동하게 끔 만들어보자
기존에 만들어놓은 버튼들 안에있는 href를 다 지워주자, 우리는 라우터로 넘길것이니까
맨 처음에 저렇게 넣어둔걸 기억하는가 ! link라는걸 넣엇기 때문에 우리는 html 태그중에 link 라는걸 쓸수있다
우리가 사용할 버튼을 Link 라는 태그로 감싸고
그 안에 to로 아까 주었던 path값을 넣어주면, 값 그대로 페이지에 연결된다 (앞에 nav.link 이거는 부트스트랩이니 무시)
자 이제 디테일 페이지까지 왔으니 주문하기 버튼을 눌러서 다시 또 이동을 해야겠지? 근데 이럴때도 link 태그를 쓸 것인가? 노노!!나 가끔 버튼 태그로도 만들고 싶어 그러니까 예시로 뒤로가기 버튼을 만들어보자
디테일 페이지에 뒤로가기 버튼을 하나 더 만들어줬어.
onClick={()=>{}} 함수안에 이제 "누르면 뒤로가게 해주세요" 라고 적어야하는데 이걸 만들기 전에 우린 새로운걸 쓸거야
이거는 그냥 외워 ! useHistory 라는 함수를 쓸건데, 이거는
import 해와야해 어디서?
늘 하던대로~ 맨위에~
그러고서 변수로 하나 만들어서 저장해줘, 이게 바로 useHistory라는 hook이야, useState하고 같은 hook이야
그렇다고해.. 알아두자..
우리가 아까 만들어둔 변수 history 라는 오브젝트는 우리가 이동했던 모든 url과 페이지 등을 담아둬 ! 
이제 그거를 다시 우리가 만들어둔 뒤로가기 버튼 함수안에 넣어주고 .goBack(); 이라는 (뒤로가기 함수)를 넣어주면
"우리가 방문했던 url 로 goBack();"해줘 라는 식이야 오우
특별히 하나 더 알려주자면 .push('/이동경로') 를 하게되면 특정 페이지로 지정해서 이동하게 해줘 !!!! 이거 좀 많이 유용할거야
우리 아까 처음에 리액트 라우터는 path 경로가 중복되면 다 겹쳐서 보여준다했지?
그게 싫을때 Switch라는 컴포넌트를 쓰는데, 이제 모든 Route를 Switch로 감쌀수 있어 그렇게되면
"여러개가 중복되도 하나만 보여주세요~" 하는거야
모든것중 택1 하는거라 생각하면 돼, 그중에서 맨위에서 먼저 매칭이 된 것만!
Switch 요약하자면 !
1.중복 허용 절대안한다
2.중복이 발생하면 그중 맨위에것만 보여주세요~
하는거임 보통 많이 쓴다
