Storybook 내 Vue 컴포넌트의 문법 구조를 파악하던 중 React와의 주요 차이점은 무엇인지 알아보게 되었다. (React만 공부해보고 Vue에 대해서는 처음 접해보는 상태)
문법과 구조
- 🆅Vue : 템플릿(Template), 스크립트(Script), 스타일(Style)로 이루어진 Single File Components(SFC) 구조를 사용.
템플릿은 HTML과 유사한 형태로 컴포넌트의 뷰를 정의하고, 스크립트는 JavaScript 로직을 담당하며, 스타일은 컴포넌트에 적용될 CSS를 정의한다. - 🆁React : JSX문법을 사용하여 JS 코드 안에 HTML과 유사한 코드를 작성한다.
JSX는 컴포넌트의 뷰를 정의하고, JS 코드와 섞여있어 컴포넌트를 더 직관적으로 작성할 수 있게 해준다.
데이터 바인딩
- 🆅Vue :
v-bind와v-on등의 디렉티브를 사용하여 데이터 바인딩과 이벤트 핸들링을 쉽게 한다.
(v-bind는 HTML 속성과 Vue 컴포넌트의 데이터를 연결해주고,v-on는 이벤트를 처리함) - 🆁React : JSX 내부에서 중괄호
{}를 사용하여 JS 표현식을 작성하여 데이터 바인딩을 수행한다.
(이벤트 핸들링은onClick,onChange와 같은 속성으로 이루어짐)
상태 관리
- 🆅Vue : 기본적으로 양방향 데이터 바인딩을 지원하며, 리액트보다 상태 관리가 비교적 간단하다.
컴포넌트 간의 데이터 통신은props와$emit을 사용하여 쉽게 처리할 수 있게 함. - 🆁React : 단방향 데이터 흐름을 가지고 있으며, 상태를 관리하기 위해 별도의 상태 관리 라이브러리(예: Redux, Mobx)를 사용하거나 React의 내장 상태 관리 기능을 사용한다.
생태계와 생산성
- 🆅Vue : 빠른 개발과 쉬운 학습 곡선으로 인해 초보자부터 전문 개발자까지 다양한 사용자들에게 인기가 있다. Vue CLI를 사용하여 프로젝트를 쉽게 설정하고 관리할 수 있다.
- 🆁React : Facebook에서 개발되었으며, 큰 생태계를 가지고 있다. 기존 JS 유저들에게 친숙하며, 커뮤니티에서 활발한 지원을 받고 있다. 하지만 초기 설정이 Vue보다는 약간 복잡할 수 있다.
컴포넌트 통신
- 🆅Vue : 컴포넌트 간 통신은
props와emit이벤트를 사용하여 부모-자식 컴포너틑 관계에서 데이터를 전달하고 이벤트를 발생시킨다. - 🆁React : 컴포넌트 간 통신은
props와callback함수를 사용하여 데이터를 상위 컴포넌트에서 하위 컴포너틑로 전달하고 이벤트를 상위 컴포넌트로 다시 전달한다.
컴포넌트 라이프사이클
- 🆅Vue : 라이프사이클 훅을 사용하여 컴포넌트의 생성, 갱신, 소멸 단계에서 작업을 수행할 수 있다.
- 🆁React : 라이프사이클 메서드를 사용하여 컴포넌트의 생명주기 이벤트에 따라 작업을 수행할 수 있다. 하지만 React16 이후로는 함수형 컴포넌트와 훅(Hook) API가 도입되어 더 간단하게 상태와 라이프사이클을 관리할 수 있게 되었다.
주요 차이점에 대해 간략하게나마 파악해보았으니, 직접 Vue 코드를 만져보며 내 걸로 만들어 봐야겠다고 다짐..!
개 발자국 🐾