history

• history 관리가 중요 (좋은 UX제공을 할 수 있다)
• react-router를 활용해서 history관리를 할 수 있다.
• 원래 a태그 누르면 history가 저장이 된다.
• 싱글페이지기 때문에 history관리가 필요하다.

window.history.back()
window.history.forward()

뒤로가기, 앞으로가기 버튼

• history로 이동하면 서버로 가지 않지만 주소에서 입력하면 서버로 이동하기 때문에 서버에서 라우팅 하지 않도록 막아줘야한다.

history.pushState({page: 1}, "title 1", "?page=1")

history에 정보를 넣어 기억하게 할 수있다.

라우터 (Router)

• url이 라우팅을 하는 기본 정보
• java에서는 컨트롤가 라우터 역할을 한다.

react-router의 다양한 기능들.
브라우저 네비게이션에 필요한 다양한 기능을 제공한다.

• <Switch> 를 사용해서 404처리가 가능하다.
• No match 에 대한 처리는 필수다.
• Route 에 exact 라는 속성을 통해서 하위 url까지 일치하는 것인지 설정할 수 있다.
• 중첩된 Route 처리도 가능하다.
• Route 컴포넌트하위에 Router컴포넌트 구성이 가능하다.
• 일치하는 URL의 파라미터 값을 전달해서 받을 수 있다.
  예 : https://reacttraining.com/react-router/web/example/url-params
• match속성의 path,url값을 잘활용하는 것이 중요하다.
• Hooks 방식을 지원받아서 사용 가능하다.
  예 : https://reacttraining.com/react-router/web/api/Hooks

종류

1.BrowserRouter

HTML5 History API 사용
주소만 바꾸고 페이지는 다시 불러오진 않는다.

2.HashRouter

옛날 브라우저 전용
주소:8080/#/game
이런식으로 주소 사이 hash(#)이 붙는다.

• 새로고침해도 서버로 이동하지 않아서 동작이 된다.
  ->hash뒤에 부분은 client에서만 아는 부분이고 server에서는 알지 못한다.
  ->검색엔진에 뜨지 않는다 (서버가 아는 주소만 검색엔진에 뜨기 때문)

3.MemoryRouter

브라우저의 주소와 무관하다.(일체 건들이지 않음)
브라우저가 아닌 환경에서 쓰기 좋다.
테스트 환경, 임베디드 웹앱, 리액트 네이티브 등에서 사용한다.

그외

4. staticRouter : 서버에서 주로 사용
5. Router : 라우트를 정의할 때 사용하는 컴포넌트 (어떤 경로로 들어왔을때 어떤 컴포넌트를 보여줄지)
6. Link : 사용한 Router의 주소를 바꿈 a태그지만 새로고침은 안됨

유용한 API 들

• useHistory (url을 넣어서 이동 하도록 해준다)
• useRouteMatch
  Redirect 를 통해서 다른 url로 바로 이동을 시킬 수 있다.
  (인증과정에서 유용하게 활용)
• NavLink 컴포넌트를 통해 navigation UI동작. (style동작등 쉽게 설정)
• server환경에서 history fallback 처리를 해야한다.
• webpack-dev-server의 경우 webpack환경설정으로 쉽게 가능.
• useHistory로 클릭 시 페이지 이동

 import { useHistory } from "react-router-dom";
  
function HomeButton() {
  let history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

• 링크태그 눌러서 하는 이동은 서버로 안가고 브라우저에서 처리
• url입력시 이동하면 서버로 가기때문에 서버에서 막아서 클라이언트로 이동하는 동작이 필요하다.
• webpack-dev-server를 사용하면 fallback url처리 필요

useRouteMatch

useRouteMatch는 match객체의 값에 접근할 수 있게 해주는 hook이다.
또한 인자로 컴포넌트의 프로퍼티들(path, strict, sensitive, exact)을 가진 객체를 받을 수 있으며, 만약 path프로퍼티와 현재 페이지의 URL이 일치할 경우 해당 path의 match객체를 반환하고 일치하지 않을 경우 null을 반환한다.

만약 아무 인자도 넘겨주지 않고 해당 hook을 호출하면 withRouter HoC로 match객체를 접근했을 때처럼 제일 가까운 부모 컴포넌트의 match값을 리턴한다.

동적 라우터 생성

• 라우터에서 설정 (:뒤에부분이 동적주소부분이자 param추출시 key값)

<Router>
<Route path="/:id" component={Detail}></Route>
<Router>

• 링크에서 설정 (props로 받은 id값을 아래와 같이 넣어줄 수 있다)

<Link to={`/${id}`}>
        {text} <button onClick={onBtnClick}>delete</button>
 </Link>

• 해당 컴포넌트에서는 useParams로 param을 뽑을 수 있다.

  const id = useParams();
  

참고 : https://john015.netlify.app/react-router-v-5-1-%EB%AC%B4%EC%97%87%EC%9D%B4-%EB%8B%AC%EB%9D%BC%EC%A1%8C%EC%9D%84%EA%B9%8C