DOM 리렌더링 정리

1. 순수 HTML + JS (Vanilla JS)

• <input>에 글자를 입력해도 DOM 전체가 리렌더링되지 않고, 해당 <input> 요소만 내부 상태(값)를 바꿈.
• 다른 요소에는 영향을 주지 않음.

일반 HTML에서 <input>에 글자를 입력할 때는:

• 화면 전체는 리렌더링되지 않는다.
• 브라우저가 해당 <input> 요소의 내부 값만 업데이트할 뿐이고,
• 그 외의 요소나 구조는 건드리지 않는다.

2. React처럼 상태 기반 프레임워크 사용 시

• <input>에 onChange 이벤트를 걸고, 상태(state)를 업데이트하면,

• 그 state를 참조하는 컴포넌트만 리렌더링됨.

  • React는 가상 DOM을 비교(diffing)해서 바뀐 부분만 효율적으로 갱신함.
  • 그래서 화면 전체가 리렌더링되는 건 아님. 하지만 컴포넌트 단위의 리렌더는 발생함.

• Vanilla JS는 직접 DOM 조작.

• 변경된 **요소만 브라우저가 재페인팅(repaint)**함.

• React처럼 가상 DOM을 쓰는 구조가 아니므로 "리렌더링"이란 표현보다는 **"DOM 변경" + "화면 일부 업데이트"**가 더 정확함.

1. 브라우저 렌더링 과정 요약

브라우저는 다음 과정을 통해 화면을 그려:

1. HTML 파싱 → DOM 생성
2. CSS 파싱 → CSSOM 생성
3. DOM + CSSOM → Render Tree