History Object and Methods

history 객체에서 가장 중요한 정보는 location이고, 이 location은 URL로부터 뽑아낼 수 있는 정보들(pathname, search, hash)와 그 외 추가적인 것들(key, state)로 구성돼있다. (URL 기초에 대한 포스팅은 여기)

key는 각 location에 따른 유니크한 값이다. state는 URL에는 존재하지 않는 데이터를 해당 location에 붙이고 싶을 때 사용된다. 회사에서 location state를 사용했던 유스케이스는, SPA에서 새로고침하면 redux state가 클리어되고 이에 따라 api를 재요청하는 부분을 개선하고자 location state를 부분적으로 사용했던 것이었다. location state를 사용하면 새로고침하더라도 state가 클리어되지 않기 때문이다.

// location 객체
{
  pathname: '/here',
  search: '?key=value', // search property is string instead of object. history leaves it up to u to decide how to parse the string.
  hash: '#extra-info',
  state: { modal: true },
  key: 'abc123'
}

history는 이름처럼 내가 navigating한 역사를 갖고 있다. 이는 location들의 array이고, 내가 현재 위치한 location의 위치를 나타내는 index value도 갖고 있다.

히스토리 메서드

• push
  • 해당 location을 array에 추가한다
  • React router Link 컴포넌트를 쓰면 history push를 사용한다
  • push를 사용하면 현재 location 뒤에 있던 location들은 없어진다. 즉, 뒤로 가기 버튼을 눌러서 앞으로 가기가 활성화되있는 경우(이를 future location이 있다고 표현하자), push 메서드를 사용해서 새로운 location으로 이동하면 원래 있던 future location들은 없어진다.
• replace
  • push와 비슷하지만 push가 새롭게 이동할 위치를 array에 추가하는 것인 반면, replace는 현 위치를 새로운 location으로 replace한다.
  • push와 달리 replace를 사용한다고 future location이 없어지진 않는다.
  • redirect(URL forwarding)할 때 사용하기 좋음. 예를 들어 페이지 1에서 2로 이동하면, 2에서 바로 3으로 리다이렉트 하게 하는 로직이 있다고 하자. 예를 들어 페이지 1에서 OAuth 로그인 리퀘스트를 보내는 버튼을 클릭하면, 로그인 정보를 확인해서 인가 코드와 함께 해당 url로 서버에 요청하고(페이지 2), 서버에서 정상 응답이 오면 welcome 페이지(페이지 3)로 랜딩하게 해주는 로직같은 게 있다. 이 때 페이지 3에서 뒤로 가기 버튼을 눌렀을 때 페이지 2가 나오는 것은 바람직하지 않을 것이다. push를 사용하면 페이지 1, 페이지 2, 페이지 3 순서대로 기록이 남아있기 때문에 페이지 3에서 back button을 누르면 페이지 2로 가게 된다. (그러면 또 페이지 2에서 페이지 3으로 넘어갈 확률이 높다) 반면 2에서 3으로 리다이렉트할 때 replace 메서드를 썼다면 2는 없어지고 기록에 페이지 1, 페이지 3만 있을 것이므로 back button을 눌렀을 때 로그인 요청 페이지인 페이지 1로 돌아가게 될 것이다.
• listen
  • 히스토리는 location이 바뀌었을 때 노티받기 위해서 옵저버 패턴을 사용하고, 각 히스토리 객체는 listen 메서드를 갖고 있다.
  • listen 메서드는 함수를 아규먼트로 받고, 그 함수는 히스토리가 저장하고 있는 리스너 배열에 저장된다.
  • location이 바뀔 때마다, 히스토리 객체는 리스너 배열에 있는 모든 함수들을 호출하여 location이 바뀔 때마다 변경사항을 업데이트한다. 리액트 라우터 컴포넌트는, 히스토리 객체를 subscribe하여 location이 바뀔 때마다, re render한다.
• createHref
  • location 객체를 인풋으로 받고 url을 아웃풋으로 뱉는 메서드다.
  • 히스토리는 내부적으로 로케이션 객체를 통해 navigate한다. 하지만 이러한 히스토리 패키지를 인식하지 못하는 코드들도 있다. 예를 들어 앵커 엘리먼트들은 로케이션 객체가 뭔지 알지 못한다. 즉 앵커 엘리먼트를 사용해서 navigate 해야하는 경우, location 객체로부터 url을 뽑아내야 할 때 사용하기도 한다.