HTML, CSS, JavaScript를 어느 정도 배우고 나면 꼭 한 번은 React나 Vue라는 이름을 보게 된다. 처음에는 “JavaScript만 있으면 되는 거 아니야?”, “왜 굳이 또 다른 걸 배워야 하지?”라는 생각이 든다.
나도 처음에는 그랬다. 버튼 하나 만들고, 글자 바꾸고, 메뉴 열고 닫는 정도는 JavaScript만으로도 충분했다. 그런데 페이지가 점점 복잡해지기 시작하자 코드가 너무 길어지고, 어디서 무엇이 바뀌는지 스스로도 헷갈리기 시작했다.
그때 알게 된 것이 바로 프레임워크다.
프레임워크는 쉽게 말해, 웹사이트를 더 쉽고 체계적으로 만들 수 있도록 미리 준비된 도구 모음이다. 이미 자주 쓰는 기능들이 정리되어 있어서, 개발자는 처음부터 모든 것을 직접 만들지 않아도 된다.
예를 들어 집을 짓는다고 생각해보자. JavaScript만 사용하는 것은 벽돌과 나무를 하나씩 직접 가져와 집을 짓는 것에 가깝다. 반면 React나 Vue 같은 프레임워크는 이미 창문, 문, 벽이 어느 정도 준비된 조립식 집과 비슷하다. 필요한 것을 가져와 조립하면 되기 때문에 훨씬 빠르고 편하다.
왜 JavaScript만으로는 점점 힘들어질까
처음에는 JavaScript만으로도 충분하다. 예를 들어 버튼을 누르면 글자가 바뀌는 정도는 아래처럼 간단하게 만들 수 있다.
button.onclick = function() {
title.innerText = "안녕하세요";
}
하지만 웹사이트가 커지면 상황이 달라진다.
예를 들어 쇼핑몰을 만든다고 해보자. 상품 목록, 장바구니, 로그인, 결제, 검색, 리뷰, 메뉴, 알림창까지 모두 들어간다. 그러면 JavaScript 코드도 수백 줄, 수천 줄이 된다.
이때 가장 흔하게 생기는 문제가 있다.
- 어디서 코드가 바뀌었는지 찾기 어렵다.
- 버튼 하나 수정했는데 다른 부분까지 이상해진다.
- 같은 코드를 여러 번 반복해서 쓰게 된다.
나도 예전에 메뉴 버튼을 수정했다가, 왜인지 다른 페이지의 버튼까지 같이 망가진 적이 있었다. 당시에는 코드가 여기저기 흩어져 있어서 원인을 찾는 데만 한참 걸렸다.
프레임워크는 이런 문제를 줄여준다. 화면을 여러 조각으로 나누고, 필요한 부분만 다시 바꿀 수 있게 해주기 때문이다.
프레임워크를 사용하면 무엇이 편해질까
React나 Vue를 사용하면 웹사이트를 작은 부품처럼 나눠서 만들 수 있다.
예를 들어 아래와 같은 화면이 있다고 해보자.
- 상단 메뉴
- 로그인 버튼
- 상품 카드
- 하단 푸터
JavaScript만 사용할 때는 이것들을 한 파일 안에서 모두 관리하는 경우가 많다. 하지만 프레임워크를 사용하면 각각을 따로 만들 수 있다.
즉:
- 메뉴는 Menu 파일
- 상품 카드는 Product 파일
- 로그인 버튼은 Login 파일
처럼 나눌 수 있다.
그래서 나중에 로그인 버튼만 수정하고 싶다면, Login 파일만 열면 된다. 다른 부분을 건드릴 필요가 없다.
처음에는 이런 방식이 오히려 더 복잡해 보일 수 있다. 그런데 한 번 익숙해지면, 웹사이트가 커질수록 훨씬 편해진다.
React는 왜 이렇게 많이 사용할까
React는 현재 가장 많이 사용하는 프론트엔드 프레임워크 중 하나다. 정확히 말하면 React는 ‘라이브러리’에 더 가깝지만, 보통은 프레임워크처럼 함께 묶여서 사용된다.
React가 유명한 이유는 크게 세 가지다.
- 사용하는 사람이 많다.
- 정보와 예제가 정말 많다.
- 큰 회사들이 많이 사용한다.
실제로 아래 같은 서비스들도 React를 사용한다.
- Netflix
- Airbnb
React의 가장 큰 특징은 화면을 ‘컴포넌트’라는 작은 조각으로 나눈다는 점이다.
예를 들어 버튼 하나도 컴포넌트로 만들 수 있고, 상품 카드 하나도 컴포넌트로 만들 수 있다.
그리고 같은 버튼을 여러 곳에서 재사용할 수 있다.
예를 들어 회원가입 버튼이 여러 페이지에 있다면, 버튼을 한 번만 만들어두고 계속 가져다 쓰면 된다.
그래서 React는 웹사이트가 크고 복잡해질수록 훨씬 강해진다.
Vue는 왜 초보자가 배우기 쉽다고 할까
반면 Vue는 React보다 조금 더 쉽게 느껴지는 경우가 많다.
왜냐하면 Vue는 HTML과 비슷한 방식으로 작성할 수 있기 때문이다.
예를 들어 React는 처음 보면 괄호와 코드가 많아서 조금 복잡하게 느껴질 수 있다. 하지만 Vue는 기존 HTML에 기능을 조금씩 추가하는 느낌이라서, 처음 배우는 사람도 비교적 이해하기 쉽다.
특히 Vue는:
- 코드가 짧다.
- 처음 구조를 이해하기 쉽다.
- 간단한 웹사이트에 빠르게 적용할 수 있다.
라는 장점이 있다.
그래서 작은 프로젝트나 개인 웹사이트를 만들 때는 Vue를 더 편하게 느끼는 사람도 많다.
나도 처음 React를 봤을 때는 솔직히 너무 어려워 보였다. 그런데 Vue는 HTML이랑 비슷해서 “아, 이건 뭔가 내가 아는 것에서 조금만 더 배우면 되겠다”는 느낌이 들었다.
그럼 React와 Vue 중 무엇을 배워야 할까
사실 둘 다 좋은 도구다. 중요한 것은 어떤 것을 먼저 배우느냐다.
만약 처음이고, 최대한 쉽게 시작하고 싶다면 Vue가 더 편할 수 있다.
반대로 앞으로 취업이나 실무, 큰 프로젝트까지 생각하고 있다면 React를 배우는 사람이 더 많다.
간단하게 정리하면 아래와 같다.
| 구분 | React | Vue |
|---|---|---|
| 느낌 | 조금 더 어렵지만 강력함 | 조금 더 쉽고 직관적임 |
| 초보자 | 처음에는 헷갈릴 수 있음 | 상대적으로 배우기 쉬움 |
| 실무 사용 | 매우 많음 | 점점 늘고 있음 |
| 추천 | 취업, 큰 프로젝트 | 입문, 개인 프로젝트 |
하지만 사실은 둘 중 하나를 배우면, 나중에 다른 하나를 배우는 것도 생각보다 어렵지 않다. 중요한 것은 먼저 프레임워크라는 개념 자체를 이해하는 것이다.
프레임워크를 꼭 배워야 할까
처음부터 꼭 React나 Vue를 배워야 하는 것은 아니다. HTML, CSS, JavaScript를 아직 익히는 중이라면, 당장은 프레임워크 없이도 충분하다.
하지만 어느 순간 “코드가 너무 길다”, “같은 걸 계속 반복한다”, “페이지가 많아질수록 정리가 안 된다”는 느낌이 들기 시작한다.
그때가 바로 프레임워크가 필요한 순간이다.
프레임워크는 복잡한 웹사이트를 더 쉽게 만들기 위해 존재한다. 그리고 React와 Vue는 그중에서도 가장 많이 사용하는 도구다.
처음에는 낯설고 어려워 보여도, 결국 한 번쯤은 배우게 될 가능성이 크다. 그리고 막상 익숙해지면 “왜 진작 안 썼지?”라는 생각이 들 정도로 편해진다.