📓 학습 관련 자료 공유
- popstate 이벤트
- 컴포넌트
👀 지식 공유
오늘 공부한 내용 중 새로 알게된 내용이나 기존과 다르게 알게된 점 등을 공유해요!
대현
동우
주영
명재
다연
- history API
- 브라우저에서 페이지 로딩 시, 세션 히스토리를 갖는다.
- 세션 히스토리를 통해 페이지 이동이 가능하다.
- 여기서 페이지 이동은 실제로 페이지가 이동하는 것이 아닌, url 업데이트 방식이기에 SPA가 가능해지는 이유다.
- pushState(state, title, url)
- 세션 히스토리에 새 url 상태를 쌓는 함수
- 화면 리로드 x
- replaceState(state, title, url)
- 세션 히스토리에 현재 url을 대체할 url
- 화면 리로드 x
- 뒤로가기 했을 때 그 페이지로 이동이 되지 않았으면 할 때 사용
- addEventListner(’popstate’, () ⇒ this.render())
- 이벤트 중에 popstate가 무엇인지 몰랐는데 이번 기회에 알게 되었다.
- 브라우저의 백 버튼이나 history.back() 호출로 이벤트가 발생한다.
- popstate 이벤트는 사용자의 세션 기록 탐색을 하며 현재 활성화된 기록 항목이 바뀔 때 발생되는 이벤트이다.