Routing

1. 라우팅이랑 무엇인가?

• 라우팅이란 리액트에서의 페이지 이동을 의미한다.
  • 페이지 이동이란 브라우저 주소가 바뀐다는 것
• 리액트에서의 라우팅 방법
  • 리액트에는 html파일이 하나밖에 없다. (spa_single page api)
    따라서 페이지 이동을 할 때 필요한 컴포넌트만 뽑아 보여준다.
• spa를 사용하는 이유
  • 멀티 페이지 api를 이용하게 되면 많은 html 파일이 생성되는데, state를 일일히 주기가 어렵다. 따라서 state관리가 쉬운 spa를 사용한다.

2. 라우팅 처리 순서

• 라우팅 시작전, 패키지를 설치 하고 한다.
  • npm install react-router-dom

1. index.js에 BrowserRouter import하고 적용해주기.
   • BrowserRouter : 페이지가 실제로 주소창을 참고하여 이동되도록 도와줌, 즉 내 주소창을 보고 컴포넌트를 분기해줌
2. 세부화면 만들기
   • 이동할 컴포넌트 만들어주기(페이지가 될 컴포넌트)
3. App.js에 Route 적용해주기
   • 1st. import {Route} from "react-router-dom"
   • 2nd. 페이지 분기점에 < Route path = "/주소이름" > 달아주기
   • 컴포넌트 끌어오는 방법 : 태그로 달기, component={} 사용
4. exact 적용하기
   • 중복 주소 제거 : 완전히 똑같은 주소의 페이지만 띄워준다.
   • 라우트 적용한 태그에서 path옆에 적어준다.
5. 링크 이동시키키
   1. < Link to = "주소" >
   2. history 이용 -> 히스토리를 이용 할 수 있는 여건이 갖춰져야 함(component={}를 이용하든지, 리액트 훅을 이용해야 한다.)
      • props.history.push("주소")

3. 실제로 라우팅 이용해 보기

• 실제 내가 한 프로젝트에 주석을 달아 설명을 붙여보았다.
  링크텍스트
  -> 내가 짠 코드파일들을 올린 깃허브

< 1 > 브라우저 라우터 임포트하고 적용하기 < 2,3 > App.js 에 라우트 임포트 해주고 라우팅 적용하기 <5> 라우팅한 페이지 링크 이동해주기

4. 라우팅을 조금 더 꼼꼼히 사용하는 방법

• 이건 프론트엔드 개발자가 가지고 있으면 좋은 센스 정도로 넘어가면 된다.

  • 잘못된 주소 처리하기
    1.중복주소 처리 = exact 사용
    2.틀린 주소 처리 = switch 사용
    • 주소가 틀린 경우 잘못된 주소임을 알려주는 컴포넌트 만들기
    • 라우트 임포트한곳에 Switch 적어서 임포트
    • 라우트 된 컴포넌트를 모두 감싸도록 스위치 적용
    • 잘못된 주소임을 알려주는 컴포넌트에 라우트 적용(path를 입력하지 않는다.)