— 웹 개발이 헷갈리는 이유를 한 번에 정리해보자
웹 개발을 공부하다 보면 늘 같은 질문에 부딪힌다.
“HTML이랑 CSS는 알겠는데,
JavaScript는 또 뭐고,
React는 왜 필요한 거지?”
이 혼란은 도구의 역할이 다르다는 사실이 섞여서 생긴다.
이 네 가지는 경쟁 관계가 아니라 조립식 구조에 가깝다.
1️⃣ HTML — 웹의 “뼈대”
HTML은 웹페이지의 구조를 만든다.
제목이 어디 있고
버튼이 어디 있고
입력창이 어디 있는지
를 정의한다.
<h1>로그인</h1>
<input type="text">
<button>확인</button>
이 코드는 말 그대로 “여기에 제목, 입력칸, 버튼이 있다”라고 알려주는 설계도다.
하지만 이 상태로는 디자인도 없고, 동작도 없다.
2️⃣ CSS — 웹의 “외형과 분위기”
CSS는 HTML로 만든 구조에 디자인과 감정을 입힌다.
button {
background: black;
color: white;
border-radius: 8px;
}
이제 버튼은 그냥 버튼이 아니라
“둥글고, 어두운, 모던한 버튼”이 된다.
👉 HTML이 “뭐가 있는지”라면
👉 CSS는 “어떤 느낌인지”다.
3️⃣ JavaScript — 웹의 “두뇌와 반응”
JavaScript는 웹에 행동과 논리를 추가한다.
button.onclick = () => {
alert("클릭됨!");
}
이제 버튼은 눌리면 반응하는 객체가 된다.
- 입력값을 읽고
- 서버에 보내고
- 결과를 받아서
- 화면을 바꾸는 것
이 모든 것이 JavaScript의 역할이다.
HTML = 구조
CSS = 디자인
JavaScript = 행동과 로직
이 세 개만 있어도 웹앱은 만들어진다.
4️⃣ React — JavaScript를 “대형 앱용”으로 만든 도구
그런데 문제가 생긴다.
웹이 커지면:
- 버튼 수십 개
- 상태 수백 개
- 화면이 계속 바뀜
이걸 순수 JavaScript로 관리하면 코드가 폭발한다.
그래서 나온 것이 React다.
React는 새로운 언어가 아니다.
JavaScript로 UI를 관리하기 위한 “프레임워크”다.
5️⃣ React가 하는 일
React는 화면을 부품(Component) 단위로 나눈다.
<LoginButton />
<UserProfile />
<TodoList />
그리고 상태(state)가 바뀌면
👉 필요한 부분만 자동으로 다시 그려준다.
이것이 핵심이다.
“DOM을 내가 직접 만지지 말고
상태만 바꾸면 React가 화면을 알아서 고쳐준다.”
6️⃣ 이 네 가지의 실제 관계
정리하면 이렇다.
| 역할 | 무엇 |
|---|---|
| HTML | 구조 |
| CSS | 디자인 |
| JavaScript | 로직 |
| React | 로직으로 화면을 관리하는 방식 |
React는 HTML과 CSS를 버리는 게 아니라,
JavaScript가 HTML을 더 똑똑하게 다루도록 도와주는 시스템이다.
React 코드도 결국 브라우저에서는
👉 HTML + CSS + JS로 변환되어 실행된다.
7️⃣ 왜 우리는 헷갈릴까?
많은 강의와 튜토리얼이 이렇게 말한다.
“React로 웹을 만든다”
하지만 실제로는
“JavaScript + React 방식으로
HTML과 CSS를 생성한다”
가 정확한 표현이다.
핵심 한 줄 요약
HTML과 CSS는 무대이고,
JavaScript는 배우이며,
React는 연출 방식이다.