window.location
객체는 브라우저 창의 현재 URL을 표현하며, 다양한 방법으로 사용자가 페이지를 이동하거나 URL 정보를 다루는 데 사용될 수 있습니다. window.location
객체는 주요한 여러 속성과 메서드를 가지고 있습니다.
window.location.href
: 전체 URL을 얻거나 설정하는 데 사용됩니다. 아래는 그 예시``` console.log(window.location.href); // 현재 페이지 URL을 출력
window.location.href = 'http://www.example.com'; // 페이지를 www.example.com으로 이동
```
window.location.replace(URL)
: 지정한 URL로 이동하되 브라우저의 히스토리를 업데이트하지 않습니다. 즉, 이 메서드를 사용하여 페이지를 이동하면 '뒤로 가기' 버튼을 사용하여 이전 페이지로 돌아갈 수 없습니다. 예를 들어, 다음과 같이 사용할 수 있습니다:window.location.replace('http://www.example.com');
window.location.reload()
: 현재 페이지를 새로 고침합니다. 예를 들어, 다음과 같이 사용할 수 있습니다:window.location.reload();
위와 같은 window.location
의 사용은 React에서도 동일하게 적용됩니다. 하지만 React에서는 라우팅 라이브러리(예를 들어, React Router)를 사용하여 페이지 이동을 더욱 쉽게 처리하는 것이 일반적입니다. 이렇게 하면 SPA(Single Page Application)의 특징을 유지하면서 페이지간 이동을 처리할 수 있습니다.
그러나 window.location
객체를 사용하는 것이 적절한 경우도 있습니다. 예를 들어, 외부 사이트로 리다이렉트하거나, 페이지를 완전히 새로 고침하거나, 현재 URL에 접근할 필요가 있는 경우 등입니다. 하지만 가능한 한 React의 방식에 따라 라우팅을 처리하는 것이 권장됩니다.