js로 굳이 refresh 왜함?
Server 컴포넌트에서나 정적 페이지에서 데이터가 바뀔경우 페이지 새로고침이 필요할 수 있다.
방법1
location.reload();
javascript에서 페이지를 새로 고치는 가장 간단한 방법은 location.reload()메소드를 사용하는 것이다. 이 메서드는 서버에서 현재 웹페이지를 다시 로드하여 현재 콘텐츠를 삭제하고 최신 콘텐츠를 로드합니다.
페이지가 캐시되어 있어도 다시 최신 콘텐츠를 가져오려면 true 넣어주면된다.
location.reload(true);
location.reload() 사용의 장점
- 간단하고 사용하기 쉬움
- 서버에서 전체 페이지를 다시 로드하여 최신 콘텐츠를 얻을 수 있음
location.reload() 사용의 단점
- 페이지의 현재 콘텐츠를 삭제하므로 사용자 입력이나 데이터가 손실됨
- 페이지가 다시 로드될 때 깜박임 효과가 발생하여 사용자 경험에 영향을 미칠 수 있음
방법2
location.replace(location.href);
location.href는 현재 url을 가져온다.
즉, location.replace()는 웹페이지의 현재 URL을 새 URL(동일한 URL)로 바꾸는 메서드를 사용하면 페이지가 새로 고침된다.
location.replace() 사용의 장점
- 새로운 콘텐츠로 페이지를 다시 로드하는 빠른 방법임
- 페이지의 현재 콘텐츠를 유지하고 URL만 교체하여 사용자 입력이나 데이터 손실을 방지함
location.replace() 사용의 단점
- 이는 페이지의 전체 URL을 대체하므로 현재 검색 기록이 손실될 수 있음
- 웹 페이지가 새 창이나 탭에서 열리는 경우와 같은 일부 시나리오에서는 작동하지 않을 수 있음
방법3
location.href = location.href;
location.href 사용의 장점
- 페이지를 새로 고치는 간단함
- 페이지의 현재 콘텐츠를 보존하고 URL만 업데이트하여 사용자 입력이나 데이터의 손실을 방지함.
location.href 사용의 단점
- 이는 페이지의 전체 URL을 대체하므로 현재 검색 기록이 손실될 수 있음.
- 웹 페이지가 새 창이나 탭에서 열리는 경우와 같은 일부 시나리오에서는 작동하지 않을 수 있음.
