라우팅
사용자가 클릭하거나 특정 동작을 했을 때, 웹 애플리케이션에서 다른 페이지로 이동하는 방법을 말합니다. 라우팅은 사용자가 웹 애플리케이션 내에서 원활하게 이동할 수 있도록 도와줍니다.
1. location.href
현재 페이지위에 새로운 페이지를 올려놓는 방법입니다. 그래서 '뒤로가기' 버튼을 사용해 현재 페이지로 돌아올 수 있습니다.
const example = () => {
location.href = '이동하고 싶은 url 혹은 파일명";
} !참고
window.location.href 와 location.href는 기능적으로 동일합니다.
두 방식 모두 URL을 가져오거나 페이지 리디렉션을 위해 많이 사용됩니다.
명시적으로 window를 쓸지 말지의 차이입니다.
2. location.replace
현재 페이지가 지워지고 새로운 페이지로 대체됩니다. 그래서 '뒤로가기'버튼을 사용해도 이전 페이지로 돌아올 수 없습니다.
const example = () =>{
location.replace('이동하고 싶은 url 혹은 파일명');
} - 뒤로가기가 무용지물이어야 하는
결제창등에 사용하기 적합한 것 같습니다.
3. 링크를 사용한 라우팅
일반적인 하이퍼링크를 사용한 방법입니다.
href속성에 이동할 페이지의 URL을 지정합니다.
<a href = "이동하고 싶은 페이지">상세보기</a>4. 링크에 쿼리스트링을 사용한 라우팅
쿼리스트링의 특징인 데이터를 URL에 포함해 다른 페이지로 전달할 수 있습니다.
<a href="./example.html?data=15&value=10">데이터가지고 페이지이동하기</a>history.Back()
웹 브라우저에서 페이지를 이동할 때, 브라우저는 우리가 방문한 페이지들을 기록합니다. 이 기록들을 히스토리라고 부르는데요, 이 히스토리를 이용해서 이전에 방문했던 페이지로 돌아갈 수 있습니다.
- 브라우저의 '뒤로가기' 버튼을 누르면 이전에 방문했던 페이지로 돌아가는데, 이와 같은 역할을 수행합니다.
❓어떻게 작동할까
<button onclick = "history.back()">뒤로 가기</button>우선, 위의 코드처럼 웹 페이지에서 실행하면, 브라우저는 직전에 방문했던 페이지로 이동합니다.
예를 들어, A 페이지에서 B 페이지로 이동한 상태에서 history.back()을 사용하면 B페이지에서 A페이지로 돌아갑니다.
이 방법은 사용자가 쉽게 이전페이지로 이동할 수 있고, 네비게이션 구현에서 페이지 간의 이동을 쉽게 할 수 있습니다.
