window.location.reload() [ 현재페이지 리로드하기 ]

➡️ 로고를 누르면, 현재 페이지를 다시 리로드하는 기능을 구현하기 위해서 window.location.reload를 사용한다.

 

---

1. 기능

현재 페이지를 다시 리로드

 

 

2. 방법

window.location.reload()

---

 

우선 나는 현재 넷플릭스 사이트를 만들고 있는데, 맨 위에 있는 넷플릭스 로고버튼을 누르면 현재 페이지가 리로드되는 기능을 넣어야했다.

이를 위해서 window.location.reload()를 사용하였다.

 

🔫 의도: 왼쪽 제일 상단에 있는 넷플릭스 버튼을 누르면 페이지를 다시 리로드하도록

 

✅ 코드

<img
        alt="Netflix logo"
        src="이미지 url"
        onClick={() => window.location.reload()}
      />

 

onClick이벤트를 통해 이미지를 누르면 reload를 실행하게 한다.

 

 

✔️ 결과확인

 

 

 

 

🔎 원리

window.location은 웹 브라우저의 JavaScript 객체로서, 현재 브라우저 창의 주소(혹은 URL)와 관련된 정보를 제공하고 조작할 수 있는 속성(property)이다. 이 객체를 통해 현재 페이지의 URL을 확인하거나, 새로운 URL로 이동하거나 페이지를 다시로드할 수 있다.

1. window.location.href: 현재 페이지의 전체 URL을 나타낸다. 이 속성을 읽어오거나 변경함으로써 페이지의 URL을 변경
2. window.location.protocol: 페이지의 프로토콜(http, https 등)을 나타낸다.
3. window.location.host: 페이지의 호스트(도메인) 정보를 나타낸다.
4. window.location.pathname: 페이지의 경로 부분을 나타낸다.
5. window.location.search: 페이지의 쿼리 문자열 부분을 나타낸다.
6. window.location.hash: 페이지의 해시(fragment) 부분을 나타낸다.
7. window.location.assign(url): 지정된 URL로 페이지를 이동. window.location.href = url과 같은 역할을 한다.
8. window.location.replace(url): 현재 페이지를 새로운 URL로 대체. 뒤로 가기로 이전 페이지로 돌아갈 수 없다.
9. window.location.reload(): 현재 페이지를 다시로드.

공식문서

Window: location property - Web APIs | MDN

 

 

⛔️ 주의할 점

window.location.reload()를 호출하면 현재 페이지의 모든 상태와 데이터가 초기화되며, 사용자의 입력에 의해 변경된 내용도 모두 사라진다.

 

window.location.reload()의 2가지 호출방법

1. window.location.reload() (매개변수 없이): 이 경우에는 현재 페이지를 브라우저의 캐시를 사용하여 다시 로드. 이전에 이미 로드된 리소스들을 새로 다운로드하지 않고, 캐시된 리소스를 사용하여 페이지를 갱신. 이는 빠른 페이지 갱신을 위해 사용될 수 있다.
2. window.location.reload(true): 이 경우에는 브라우저의 캐시를 무시하고 모든 리소스를 다시 다운로드하여 페이지를 완전히 새로고침. 이는 서버에서 새로운 내용이나 변경된 리소스를 가져오기 위해 사용될 수 있다.