[JavaScript/자바스크립트] 상황별 페이지 새로고침 완벽 정리 (현재창, 부모창, 프레임, 지연 새로고침)

웹 개발의 감초, 페이지 새로고침!
웹 개발을 하다 보면 특정 이벤트가 발생한 후 화면을 최신 상태로 업데이트하기 위해 '새로고침(Refresh)'을 해야 하는 경우가 정말 많습니다. 예를 들어, 게시판에서 새로운 글을 작성하고 저장 버튼을 눌렀을 때 목록을 다시 불러오거나, 결제 팝업창에서 결제를 완료한 뒤 원래 있던 메인 창의 상태를 변경해야 할 때가 대표적이죠.

자바스크립트(JavaScript)에서는 단순히 F5 키를 누르는 것과 같은 효과를 내는 기본 새로고침부터, 팝업창에서 부모 창을 제어하거나 특정 프레임만 콕 집어서 새로고침하는 등 다양한 방법을 제공합니다.

오늘은 실무에서 무조건 알고 있어야 하는 상황별 자바스크립트 새로고침 명령어 5가지를 총정리해 보겠습니다.

---

1. 가장 기본! 현재 페이지 새로고침
가장 많이 쓰이고 아주 단순한 형태입니다. 사용자가 현재 보고 있는 창(브라우저) 자체를 다시 불러옵니다.

// 현재 페이지 새로고침 location.reload();

 

보너스 팁 (캐시 무시하기): 브라우저는 로딩 속도를 높이기 위해 캐시(Cache)를 사용하는데, 가끔 캐시 때문에 변경된 데이터가 화면에 즉각 반영되지 않을 때가 있습니다. 이럴 때는 location.reload(true); 라고 괄호 안에 true를 넣어주면, 캐시를 무시하고 서버에서 최신 데이터를 강제로 다시 불러오게 됩니다.

 

---

2. 팝업창에서 원래 창(부모창) 새로고침
웹사이트를 이용하다 보면 자식 창(팝업창)을 띄워 작업을 한 뒤 팝업을 닫는 경우가 있습니다. 이때 팝업을 열어준 원래의 '부모 창'을 새로고침하고 싶다면 opener라는 객체를 사용해야 합니다.

// 부모창 새로고침 opener.location.reload();

실무에서는 주로 팝업창에서 데이터 처리가 끝난 후, opener.location.reload();를 호출하여 부모 창을 갱신하고 window.close();를 써서 현재 팝업창을 스스로 닫는 패턴으로 아주 많이 활용됩니다.

 

---

3. Iframe / 프레임 환경에서 새로고침
최근에는 많이 줄어들었지만, 여전히 관리자 페이지나 오래된 시스템에서는 화면을 여러 프레임(Frame)으로 나누어 사용하는 경우가 있습니다. 이때 프레임 내부에서 새로고침을 제어하는 방법입니다.

① 최상위(전체) 프레임 새로고침
현재 내가 있는 곳이 조그만 프레임 내부일지라도, 화면 전체를 감싸고 있는 가장 껍데기(최상위 창)를 새로고침하고 싶을 때 사용합니다.

// 프레임 전체 새로고침 (최상위 창 기준) top.document.location.reload();

② 특정 프레임만 콕 집어서 새로고침
화면의 다른 부분은 가만히 두고, 지정한 특정 프레임 영역만 갱신하고 싶을 때 사용합니다. (괄호 안의 '프레임이름' 자리에 실제 프레임 태그의 name 속성값을 넣어주시면 됩니다.)

// 특정 프레임 새로고침 top.document.(프레임이름).location.reload(); // (참고) 요즘은 아래와 같은 방식도 많이 사용합니다. // parent.frames["프레임이름"].location.reload();

---

4. 일정 시간 뒤에 자동으로 새로고침 (지연 실행)
버튼을 누르자마자 바로 새로고침 되는 것이 아니라, 1초나 2초 뒤에 잠깐의 텀을 두고 새로고침을 해야 할 때가 있습니다. 이때는 자바스크립트의 타이머 함수인 setTimeout과 브라우저의 방문 기록을 제어하는 history.go(0)을 조합하여 사용합니다.

// 지정된 시간 이후 자동 새로고침 (1000 = 1초) setTimeout("history.go(0);", 1000);  // location.reload()를 활용한 최신 문법 작성법 // setTimeout(function() { location.reload(); }, 1000);

history.go(0)은 브라우저 히스토리에서 현재 위치(0)로 다시 이동하라는 뜻이므로 결과적으로 새로고침과 동일한 효과를 냅니다. 위 코드에서 두 번째 숫자는 밀리초(ms) 단위이므로, 1초 뒤에 동작하게 하려면 1000을 입력해 주면 됩니다.

 

웹 프론트엔드 개발 시 복사 붙여넣기 해두면 언젠가 무조건 쓰게 되는 자바스크립트의 화면 새로고침 방법들을 정리해 보았습니다.

단순히 location.reload() 하나만 알고 있는 것보다, 현재 창의 구조(팝업인지, 프레임인지)에 따라 opener나 top 같은 상위 객체를 적절히 호출할 줄 알아야 진짜 실력 있는 개발자라고 할 수 있겠죠? 이 코드들을 잘 스크랩해 두셨다가 실무에서 유용하게 써먹으시길 바랍니다!