1. 2000년대 초반 — 정적인 웹의 시대
2001~2003년 무렵, 웹페이지는 대부분 정적인 HTML 파일로 구성되었다.
서버가 완성된 HTML을 만들어 브라우저로 전달 → 사용자는 보기만 가능, 상호작용 불가.
페이지가 바뀌려면 항상 새로고침이 필요했다.
한계:
사용자는 단순히 “읽는 사람”이었고, 웹은 “보는 공간”일 뿐이었다.
“버튼을 누르면 바뀌는 화면”, “실시간 댓글”, “SNS 같은 동적 반응”이 불가능했다.
2. 2006~2010 — 동적인 웹의 등장과 jQuery의 시대
사람들이 “움직이는 웹”을 원하기 시작했다.
이때 등장한 것이 바로 🔥jQuery🔥, 당시엔 거의 웹 개발 필수 라이브러리였다.
jQuery의 역할:
DOM(Document Object Model)을 쉽게 조작할 수 있게 도와주는 도구.
클릭, 변경, 이벤트, 애니메이션 등을 간단히 제어할 수 있었다.
하지만… ⚠️ 문제 발생!
상태(State)가 많아지면서 코드가 복잡해지고 서로 얽히기 시작했다.
화면의 여러 부분이 서로 영향을 주면서 스파게티 코드가 됨.
작은 변화에도 모든 DOM이 꼬여버리는 문제가 생김.🥫🍕
3. 2010년대 초 — Facebook의 위기와 Jordan Walke의 등장
Facebook(현 Meta)은 뉴스피드, 댓글, 좋아요, 알림 등
동시에 변해야 하는 엄청난 양의 데이터를 다뤄야 했다.
jQuery로 DOM을 직접 조작하는 방식은 너무 느리고 유지보수가 어려웠다.
🔥🔥이때 Facebook 개발자 Jordan Walke가 새로운 개념을 제시했다🔥🔥: “DOM을 직접 건드리지 말고,
가상의 DOM(Virtual DOM)을 만들어서
바뀐 부분만 실제 DOM에 반영하자!”
🌟 이것이 바로 React의 시작이었다.
(너무나 큰 천재여서 경악밖에 안나옴)
4. 2011~2013 — React의 내부 실험 → 공개
React는 Facebook 뉴스피드에서 처음 사용되었다.
이후 2012년에는 Instagram 프로젝트에도 적용되었고,
성능과 유지보수성이 크게 개선되었다.
“이걸 우리만 쓰기엔 너무 아깝다!”
그래서 2013년 5월, 🔥JSConf US🔥에서 🔥React🔥를 오픈소스로 공개했다.
이때 React는 기존 프론트엔드의 사고방식을 완전히 바꿔버린 세 가지 철학을 제시했다 👇
5. React가 가져온 세 가지 혁신
① Declarative UI (선언형 UI)
“어떻게(How)”가 아니라 “무엇을(What)”을 보여줄지 선언하라.
기존에는 이렇게 명령형(Imperative)이었다 👇
document.querySelector(".title").innerText = "Hello!";하지만 React에서는 이렇게 바뀌었다 👇
<h1>Hello!</h1>
상태(State) 가 바뀌면 UI는 자동으로 다시 렌더링된다.
개발자는 “결과(무엇을 보여줄지)”만 말하면 된다.
즉, 명령형: DOM을 ‘어떻게 바꿀지’를 직접 지시
선언형: React가 상태를 감지해 ‘알아서’ 업데이트
→ 코드 간결, 버그 감소, 유지보수 향상
② Component-Based Architecture (컴포넌트 기반 설계)
“UI를 작은 단위로 쪼개어 재사용하자!”
리액트 이전의 웹은 하나의 긴 HTML 파일로 구성되었다.
비슷한 버튼, 카드, 입력창이 수십 개면 복붙(copy & paste) 을 해야 했다 😱
📦 React는 이를 “컴포넌트”로 묶어 해결했다.
function Button() {
return <button>클릭!</button>;
}→ 재사용 가능, 유지보수 용이, 파일 구조 간결
→ 페이지 중심 개발 → 컴포넌트 중심 개발로 패러다임 변화!
③ Virtual DOM (가상 돔)
“실제 DOM을 직접 조작하지 말고,
메모리에 복제된 가상 DOM을 먼저 수정한 뒤
바뀐 부분만 실제 DOM에 반영하자!”
DOM이란?
HTML 문서를 브라우저가 읽어서 메모리에 트리 구조로 표현한 것.
DOM을 조작하면 브라우저는 매번 전체 화면을 다시 계산(Render) 해야 한다.
노드 수가 많을수록 성능이 느려지고 비효율적이다.
Virtual DOM의 원리
React는 DOM의 복사본을 메모리에 가상으로 생성한다.
상태(State)가 바뀌면 새로운 Virtual DOM을 만든다.
이전 Virtual DOM과 비교(diffing)하여 변경된 부분만 실제 DOM에 반영한다.
// 실제 동작 원리 (비유)
if (oldDOM.title !== newDOM.title) {
updateTitle(newDOM.title);
}
전체를 새로 만드는 대신, “달라진 부분만 바꾸는” 방식!
Virtual DOM의 장점
| 항목 | 설명 |
|---|---|
| 성능 향상 | 변경된 부분만 업데이트하므로 빠름 |
| 일관성 유지 | 항상 최신 상태의 UI만 반영 |
| 코드 단순화 | 직접 DOM 조작 불필요 |
| 선언형 UI와 궁합 | 상태가 바뀌면 자동으로 UI 갱신 |
⚠️ Virtual DOM이 없다면?
상태가 바뀔 때마다 DOM 전체를 다시 렌더링해야 함
컴포넌트 간 변경 감지 불가능 → 전부 새로 그림
렌더링 비용 급증, 성능 저하, UX 악화
다시 jQuery 시절처럼 DOM 직접 조작해야 함
“Virtual DOM이 없으면 React의 선언형 시스템 자체가 무너진다.”
정리
| 시기 | 주요 특징 | 키워드 |
|---|---|---|
| 2000년대 초 | 정적 웹 | HTML |
| 2006~2010 | 동적 웹, jQuery | DOM 조작, 상태 혼란 |
| 2010~2013 | React 탄생 | Jordan Walke, Virtual DOM |
| 이후 | 선언형 UI + 컴포넌트 중심 | State, Component, Declarative |
마무리하며
리액트는 단순한 UI 라이브러리가 아니라,
“명령형 → 선언형”, “페이지 중심 → 컴포넌트 중심” 으로
웹 개발의 패러다임을 완전히 바꾼 기술이다.
Virtual DOM, Component, Declarative UI 세 가지 개념은
오늘날 모든 프론트엔드 프레임워크(Vue, Svelte, Solid 등)에
깊은 영향을 끼친 리액트의 근본 철학이다.
⭐💗⭐💗
솔직히 이번 리액트 수업을 들으면서
“와… 세상엔 왜 이렇게 혁신적인 생각을 하는 사람들이 많을까?”
라는 생각이 절로 들었다.
리액트가 프론트엔드의 새로운 패러다임을 제시한 것처럼,
나도 앞으로 새로운 패러다임을 만들어내는 사람이 되어야겠다는
동기부여를 강하게 받았다.
우리 모두 오늘도 즐코!
역시 리액트는 강평보다 이서영!