[JS] Ajax가 새로고침 없이 동적으로 페이지를 바꾸는 원리

웹사이트를 이용할 때 댓글을 달거나 좋아요를 누르면 페이지가 새로고침되지 않고도 바로 반영되는 것을 본 적이 있을 것이다. 이는 마치 마법처럼 느껴질 수 있지만, 사실 그 뒤에는 AJAX와 브라우저 렌더링의 강력한 메커니즘이 숨어 있다.

 

 

 

---

AJAX는 어떻게 동작하는가?

AJAX(Asynchronous JavaScript and XML)는 서버와 비동기적으로 데이터를 주고받는 기술이다. AJAX가 등장하기 전에는 새로운 데이터를 받아오기 위해 페이지 전체를 다시 로드해야 했다. 예를 들어 댓글을 달 때마다 페이지가 새로고침되면서 작성 중이던 내용이 사라지거나 스크롤 위치가 초기화되었다. 그러나 AJAX 덕분에 페이지 일부만 수정하고 새로고침 없이 데이터를 업데이트할 수 있게 되었다.

 

---

 

AJAX가 동적으로 페이지를 수정하는 방식

AJAX는 다음과 같은 과정으로 동작한다.

 

1. 서버 요청

• 사용자가 댓글을 작성하고 ‘등록’ 버튼을 누르면 AJAX 요청이 발생한다.

• 이때, 페이지 전체가 아닌 필요한 데이터만 서버에 요청한다.

2. 비동기 통신

• AJAX는 요청을 보낸 뒤 응답을 기다리지 않고 다른 작업을 계속 진행한다.

• 이 덕분에 화면이 멈추지 않고 부드러운 사용자 경험을 제공한다.

3. 서버 응답 처리

• 서버는 요청을 처리한 뒤, 필요한 데이터만 JSON 형식 등으로 응답한다.

• 예를 들어, 새로 작성된 댓글 내용만 서버에서 전달된다.

4. DOM 업데이트

• 응답받은 데이터를 사용해 DOM(Document Object Model)을 수정한다.

• JavaScript는 innerHTML, appendChild() 등의 메서드를 사용해 변경된 부분만 갱신한다.

• 이때 페이지 전체가 다시 그려지는 것이 아니라 수정된 부분만 업데이트되기 때문에 새로고침이 필요 없다.

 

DOM이란 무엇인가?

[HTTP] 브라우저(Browser)의 작동원리와 DOM(Document Object Model)

 

---

 

브라우저는 DOM 수정 후 어떻게 렌더링할까?

AJAX는 서버와 통신할 뿐이다. 화면에 변화를 일으키는 것은 브라우저의 렌더링 엔진이다. 그렇다면 브라우저는 어떻게 새로고침 없이도 화면을 즉시 수정할 수 있을까?

 

DOM과 렌더 트리의 관계

• 브라우저는 HTML을 해석해 DOM(Document Object Model) 트리를 만든다.

• 동시에 CSS를 해석해 CSSOM(CSS Object Model) 트리를 생성한다.

• 이 둘을 결합해 렌더 트리(Render Tree)가 만들어지며, 이를 바탕으로 화면이 그려진다.

 

CSSOM, Render Tree란 무엇인가?

[HTTP] 브라우저(Browser)의 작동원리와 DOM(Document Object Model)

 

실시간 DOM 수정과 부분 렌더링

• JavaScript로 DOM을 수정하면 브라우저는 렌더 트리를 변경된 부분만 다시 계산한다. 브라우저는 기기의 화면 새로고침 주기 (60fps)에 맞춰 계속해서 보여지는 화면을 다시 계산하고 있다.

• 이 과정을 리플로우(Reflow)와 리페인트(Repaint)라고 한다.

• 예를 들어, AJAX 응답을 받아 새 댓글을 DOM에 추가하면 해당 댓글 부분만 리페인트된다.

• 페이지 전체를 다시 그릴 필요가 없기 때문에 사용자에게는 새로고침 없이 즉각적인 변화가 보인다.

 

 

 

---

결론: AJAX와 브라우저 렌더링

AJAX는 비동기 통신을 통해 서버와 데이터를 주고받으며 DOM을 수정하고, 브라우저는 변경된 부분만 다시 렌더링한다. 이 과정에서 페이지 전체를 다시 그리지 않기 때문에 새로고침 없이도 동적인 페이지 업데이트가 가능하다.

 

이는 사용자 경험(UX)을 크게 향상시키며, 빠르고 부드러운 웹 애플리케이션을 만들 수 있게 해준다. 앞으로 웹 개발을 할 때 AJAX와 DOM 조작의 강력한 조합을 적극 활용하면 더 나은 사용자 경험을 제공할 수 있을 것이다.