[기술 궁금증] React vs Vue 각각 장단점이 뭔데???? 🤔

이상돈·2024년 3월 13일

서두

카카오 FE플랫폼에서 가장 많이 사용하는 프레임워크는 React와 Vue라고 알려져 있다. 내가 기본적으로 알고있는건..... React는 한국에서 많이 쓰이고, Vue가 일본에서 많이 쓰인다만 알고있었는데.... 이참에 한번 둘의 장단점이 무엇이고, 제대로 알아보는 시간을 가지자!!!

출처: https://tech.kakao.com/2022/03/18/client-recruitment-05/

React

우선 내가 React에 대해 아는 것들을 몇개 적어보았다!
(언제든 댓글로 틀린부분 말씀해주시는거 대환영입니다:)

가상돔을 사용하여 바뀐부분만 리랜더링 해주는 자바스크립트 기반 라이브러리이다.
선언형 UI이다
객체를 직접 참조하여 변경하면 안된다.(가상돔을 통하여 바뀐부분을 감지해야하기 때문에, 직접 참조하면 에러...)
기본적으로 CSR방식의 랜더링이다.(하지만 이제 SSR + CSR 방식을 지원해주도록 서버 컴포넌트를 만들었다고 들었다. 나중에 한번 공식홈페이지에서 확인해보자!!)
컴포넌트 기반의 아키텍쳐를 가지고있다.(이거에 맞는 디자인 패턴이라면... Atomic Pattern?쯤 되는 것 같다)
Redux, Recoil, Mobx등으로 전역 상태관리를 한다.(싱글톤패턴)
데이터흐름이 단방향이다. 즉, 부모 컴포넌트에서 자식컴포넌트로 데이터가 흐른다. 자식 컴포넌트의 데이터를 부모 컴포넌트에서 쓰려면??? 데이터 끌어올리기 방식도 있는데.... props drilling이 심해지면 사용이 거의 불가능하다.(command 누르면서 계속 따라가야함... ㅠ)
이때 redux, recoil과 같은 상태관리가 필요하거나, 전역 hook을 이용하여 값을 dispatch해야한다. 대표적인 flux-pattern

Vue

웹 어플리케이션으로, 사용자의 인터페에시를 만들기위해 쓰이는 자바스크립트 기반의 프레임워크이다.
양방향 데이터 바인딩 방식을 이용한다. 즉, 화면에 표시되는 값과 프레임워크 모델 데이터 값이 동기화되어 한쪽을 변경하면 다른 한쪽도 자동으로 변경된다.
컴포넌트기반 프레임워크로 가상 DOM 랜더링 방식을 사용한다. 화면 전체를 다시 그리지 않고 프레임워크에서 정의한 방식에 따라 화면이 갱신되므로 유지보수와 재사용성이 높다.