Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

JavaScript에서 URL로 이동하는 방법: location 객체 완벽 가이드

window.location 값은 브라우저에서 현재 보고 있는 URL을 나타냅니다. JavaScript에서는 이 값을 교체하여 다른 URL로 이동할 수 있으며, 사용자를 다른 페이지로 리다이렉트하고 싶을 때 유용합니다. assign() 또는 replace() 메서드를 사용할 수도 있습니다.

사용자를 다른 웹사이트나 업데이트된 경로로 리다이렉트해야 하는 이유는 여러 가지가 있습니다. 대부분의 경우 인증 상태, 즉 클라이언트가 사이트에 로그인했는지 여부에 따라 리다이렉트를 처리하게 됩니다. 이 글에서는 JavaScript를 사용해 웹 페이지에서 이를 구현하는 방법을 살펴보겠습니다.

JavaScript로 URL 이동하기

JavaScript의 브라우저 히스토리 API를 사용하면 새로운 URL로 이동할 수 있습니다. 새 URL로 이동하는 방법은 다음 세 가지입니다.

  • window.location에 새 값 할당하기
  • window.location.assign() 메서드 사용하기
  • window.location.replace() 메서드 사용하기

세 가지 방법 모두 다른 URL로 이동한다는 목표를 동일하게 달성합니다. 각각의 방법을 하나씩 자세히 알아보겠습니다.

window.location 값으로 이동하기

새로운 URL로 이동하려면 브라우저 히스토리 API의 location 객체를 사용합니다. 세션 히스토리를 통해 location 객체에 새 URL을 재할당하거나, 같은 객체의 href 속성을 사용할 수 있습니다.

이 방식의 문법은 다음과 같습니다.

window.location = "url";

여기서 "url"은 사용자가 방문하기를 원하는 URL을 의미합니다. 이 코드가 실행되면 JavaScript 리다이렉트가 시작되고, 사용자가 웹 브라우저에서 보는 페이지가 변경됩니다.

예제를 통해 이 방법을 확인해 보겠습니다.

const handleClick = (e) => {
      console.log("click")
      window.location = ('https://example.com')
      // window.location.href = ('https://example.com')
      console.log(window.location)
    }

handleClick() 함수가 실행되면 먼저 콘솔에 메시지가 기록되고, 그다음 새로운 URL로 리다이렉트됩니다.

window.location.assign() 메서드

location 객체에는 assign()이라는 리다이렉트 메서드가 있습니다. 이 메서드는 현재 URL을 지정된 URL로 변경하고, 해당 URL을 히스토리 스택에 추가합니다.

히스토리 스택은 사용자가 지금까지 본 페이지들의 기록입니다. 뒤로 가기 버튼을 눌러 이전 페이지로 돌아갈 수 있는 것도 바로 이 히스토리 덕분입니다.

문법은 다음과 같습니다.

window.location.assign("url");

앞선 예제와 달리, 이 방식은 변수(window.location)에 값을 할당할 필요가 없습니다. 대신 메서드를 호출하여 사용자가 보는 웹 페이지를 변경합니다.

전체 예제를 살펴보겠습니다.

const handleClick = (e) => {
      console.log("click")
      window.location.assign('https://example.com');
    }

같은 사이트 내의 다른 페이지로 리다이렉트하고 싶다면, location 객체의 pathname 속성을 사용하면 됩니다.

const handleClick = (e) => {
      console.log("click")
      window.location.pathname = ('/newpage.html')
      console.log(window.location)
    }

window.location.replace() 메서드

replace() 메서드를 사용하면 사용자가 뒤로 가기 버튼으로 이전 페이지에 돌아가는 것을 막을 수 있습니다.

assign() 메서드는 이전에 보던 페이지를 브라우저 히스토리에 저장하므로, 사용자가 뒤로 가기 버튼으로 마지막 페이지로 돌아갈 수 있습니다. 반면 replace() 메서드는 히스토리에 현재 페이지를 남기지 않기 때문에, 사용자가 이전 페이지로 되돌아갈 수 없습니다.

replace() 메서드의 문법은 다음과 같습니다.

window.location.replace("url");

assign()과 마찬가지로 replace()도 메서드이며, 하나의 인수, 즉 사용자를 이동시킬 URL을 받습니다.

커스텀 함수와 함께 replace() 메서드를 사용하면, 함수 실행 시 사용자가 보는 URL을 변경할 수 있습니다.

const handleClick = (e) => {
      console.log("click")
      window.location.replace('https://example.com');
    }

어떤 방법을 선택해야 할까?

세 가지 방법 중 선택 기준은 간단합니다. 사용자가 뒤로 가기를 통해 원래 페이지로 돌아올 수 있게 하려면 window.location 또는 assign()을 사용하고, 로그인 후 리다이렉트처럼 뒤로 가기를 차단해야 하는 상황이라면 replace()를 사용하는 것이 좋습니다.

마무리

JavaScript에서 URL로 이동하는 방법은 세 가지입니다. window.location에 값을 할당하거나, window.location.assign() 메서드를 사용하거나, window.location.replace() 메서드를 사용하는 것입니다. 각 방법의 특성을 이해하고 상황에 맞게 활용하면 더욱 안정적인 페이지 리다이렉션을 구현할 수 있습니다.