React vs Vue (vs Svelte ??)

많은 프론트엔드 분들은 React와 Vue에 대해서 익숙하실 거라 생각됩니다. Svelte는 요즘 뜨고 있는 기술인데요.

세 개 모두 좋은 성능을 지녔다고 하는데 저도 정확히 알지 못해 정리하는 목적으로 작성하였습니다.

 

 

React vs Vue vs Svelte

 

---

[React vs Vue]

React와 Vue 둘 중에 뭐가 나은지 고민이신가요? 저도 같은 생각이라 정리해봤습니다.ㅎㅎ

먼저, 둘의 큰 차이점을 보면 React는 라이브러리, Vue는 프레임워크입니다.

 

React는 비교적 자유도가 높아 다른 라이브러리를 끌어다 쓰며 개발자마다 응용 방식에 따라 차이를 보여줄 수 있고,

Vue는 프레임워크로 기능이 이미 다 정해져 있기에 정해진 문법으로만 개발을 할 수 있습니다.

 

---

 

React

1. 쉽고 단순한 디자인 패턴을 가지고 있습니다. JSX문법을 사용하여 템플릿을 구축하고, 굉장히 세부적으로 잘 작성된 문서가 존재
2. 개발자는 기존 js를 활용하여 개발가능(유연성 및 자유도 높음)
3. Virtual DOM을 통해 다양한 렌더링과 최적화를 적용시켜 빠르고 안정적
4. 콘텐츠 중심 애플리케이션을 위한 서버 사이드 렌더링을 지원
5. 프로그레시브 웹을 지원
6. 웹 애플리케이션의 state를 관리하는 라이브러리를 지원합니다.(Redux) - 리액트는 사실 배우기 시작할 때는 쉽지만 Redux를 공부하기 시작할 때부터 러닝 커브가 높아짐
7. 컴포넌트를 사용하여 재사용성이 좋음
8. 페이스북이 개발을 하고, 꾸준히 페이스북 및 공동체(개인, 기업)에 의해 유지보수 되고 있어 망할 일이 없음

 

Vue

1. Vue만의 문법을 사용(라이브러리처럼 부분적 사용이 불가능하고, 프레임워크가 지원해주는 형식과 문법에 따라서 작성해야 함)
2. 자유도는 떨어지지만 정해진 규칙과 문법이 있어 협업 또는 인수인계 과정에서 다른 개발자가 작성해놓은 코드를 더 빨리 이해할 수 있음
3. 양방향 바인딩 지원
4. 단순한 구조로 인해 추가적인 시간을 할당하지 않고서 재사용 가능한 템플릿들을 개발할 수 있음

 

---

 

그러면 React를 쓰는 게 좋지 않냐라고 의문점을 가질 텐데, 저의 선택을 먼저 말하자면....

.

.

.

 

저는 React를 먼저 공부해보려 합니다. ㅎㅎ   반전이 없는 게 반전!

사실 어떤 게 좋고 나쁘다를 떠나서 개발자 성향 차이나 가고 싶은 회사가 원하는 기술 등 여러 가지에 따라 나뉘는 것 같습니다. 아예 아무것도 모르고 처음으로 배워서 웹을 만들고 싶다 하시는 분들은 둘 중에 고르자면 Vue를 추천드리고 싶습니다. 그 이유는 React는 라이브러리이기 때문에 형식적이지 않아 처음 접하는 분들에게 너무 자유도가 높은 것이 단점이 될 수 있고 Vue는 이와 반대로 형식적이기에 처음 배우기에 더 편할 것입니다

 

---

그렇다면, Svelte는 뭔가요?

Svelte는 최근 업계에 등장한 언어 중 하나로, React와 Vue 등 기존 언어를 보완하고자 2016년에 출시되었습니다.

Rich Harris가 개발했고, 현재 Svelte의 핵심 멤버들이 관리하고 있습니다.

Svelte의 공식 웹사이트상에서는 Svelte를 컴포넌트 프레임워크라고 설명하고 있지만 사실 컴파일러와 유사합니다.

Svelte는 가볍고 빠른 앱을 개발하기 위해 가능한 한 적은 양의 코드를 작성하고 적절한 최적화도 제공해줍니다.

 

---

 

Svelte

1. 적은 양의 코드로 작성(적은 수의 코드는 유지보수와 디버깅이 더 쉬워진다는 것을 의미)
2. 가상 돔을 사용하지 않음( React와 Vue는 가상 돔 사용)
3. 진짜 반응성을 제공
4. 최근 등장하여 커뮤니티가 아직 활성화되어 있지 않음
5. 컴포넌트를 내보낼 때 자동으로 export 해줌
6. 스타일 태그에서 컴포넌트의 범위를 지정
7. 앱의 용량을 늘리지 않으면서도 시각 효과, 화면 전, 애니메이션 등을 내장하고 있음(컴파일이 가지는 장점)
8. React보다 더 가볍다. 크기가 작기 때문에 더 빨리 로드되고, 높은 응답성과 동시에 낮은 대역폭을 요구
9. 더 쉬운 구문을 사용하며 이해하기 쉬운 자체 템플릿 언어를 가지고 있음

 

---

 

그러면 다 필요 없고 Svelte를 써야겠네?

안됩니다. 아직은 그러지 마세요...

물론 Svelte가 아주 훌륭한 언어라는 사실은 맞습니다. 배우기 쉽고 가볍고 성능도 좋습니다.

그렇지만 단점을 살펴보면,

 

1) 커뮤니티가 작다

인기가 많고 사용자들이 많은 사용을 하는 React와 Vue는 그만큼 커뮤니티가 활성화되어있습니다. 거대한 커뮤니티에서 수많은 무료 강좌와 수많은 오류들의 솔루션을 쉽게 구할 수 있습니다.

하지만 Svelte에서는 이러한 규모의 커뮤니티를 기대하기는 어렵습니다. 앞서 말한 것처럼 최근 등장하였기 때문에 커뮤니티가 활성화되어있지 않고, 수많은 오류들을 마주했을 때도 솔루션을 구하기 어려울 것입니다.

 

2) 운영 주체가 기업이 아니다

운영 주체가 기업이 아닌 것은 큰 문제가 될 수 있고 안될 수 있습니다. 예를 들면 React는 페이스북이 개발하여 관리하고 있습니다. 기업의 경우 계속 발전시키고 안정적으로 지원을 해줄 수 있지만 기업이 아닌 경우 현재 Svelte를 관리하는 핵심 개발자분들의 열정이 언제 식어버릴지는 아무도 모르게 됩니다.

 

---

 

결론

Svelte는 잠시 넣어두고...(많이 클 때까지)  React와 Vue를 사용합시다!!