React.js에서 Vue.js로 전환을 시도했습니다.

소개

몇 년 전, 다른 많은 사람들과 마찬가지로 저는 React.js 프런트엔드 라이브러리의 후크와 기능적 구성 요소가 등장하면서 "과장"되었습니다. 이는 Components 클래스보다 훨씬 적은 코드를 작성하여 완전히 새로운 개발 방법을 제공했습니다. 정말 한동안 푹 빠져 있었어요.

오늘 저는 새로운 클라이언트 프로젝트의 요구 사항을 충족하기 위해 Vue.js 프레임워크를 선택해야 했습니다. 그리고 이 프로젝트가 끝나자 저는 이것이 이 프레임워크의 새로운 사용자로서 여러분에게 피드백을 제공할 수 있는 기회라고 스스로에게 말했습니다.

그렇다면 이러한 기술 향상은 Vue.js의 악명에 걸맞은 것일까요?
요즘은 React보다 Vue에서 프론트엔드를 개발하는 것이 더 낫나요?

이것이 우리가 보게 될 것입니다!

프로젝트 시작

보일러 플레이트

프로젝트를 시작한다고 하는 사람은 힘든 구성 시간, 심지어 며칠을 절약할 수 있는 좋은 보일러플레이트를 찾고 있다고 합니다!
멀리 볼 필요 없이 npm create vue@latest 명령은 내 요구 사항을 대부분 충족합니다.

✔ Project name: … myproject-vue
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
? Add Vue DevTools 7 extension for debugging? (experimental) › No / Yes

Typescript 언어가 이미 지원되고 라우팅 시스템과 스토어가 제공되며 단위 및 엔드투엔드 테스트를 위한 여지도 있습니다!

기본적으로 Vite 번들러가 설치됩니다. 나를 불쾌하게 하지 않는 것은 무엇입니까!? 실제로 빌드가 빠르고 대부분의 경우 HMR(핫 모듈 교체)이 잘 작동합니다.

로컬 개발 서버를 시작하기 위해 작은 npm run dev를 실행하면 됩니다! 브라우저에서는 이미 실행 중입니다!

그리고 제작을 위해서요? npm run build 명령을 입력하기만 하면 입력 내용을 확인한 후 프로젝트가 dist 디렉터리에 정적 파일로 내보내집니다(Typescript가 활성화된 경우).

vite v5.2.11 building for production...
✓ 48 modules transformed.
dist/index.html                      0.43 kB │ gzip:  0.28 kB
dist/assets/AboutView-C6Dx7pxG.css   0.09 kB │ gzip:  0.10 kB
dist/assets/index-D6pr4OYR.css       4.21 kB │ gzip:  1.30 kB
dist/assets/AboutView-CEwcYZ3g.js    0.22 kB │ gzip:  0.20 kB
dist/assets/index-CfPjtpcd.js       89.23 kB │ gzip: 35.29 kB
✓ built in 591ms

프로젝트 아키텍처

.
├── README.md
├── e2e/
├── index.html
├── package.json
├── public/
├── src/
│   ├── App.vue
│   ├── assets/
│   ├── components/
│   │   ├── HelloWorld.vue
│   │   ├── TheWelcome.vue
│   │   ├── WelcomeItem.vue
│   │   ├── __tests__/
│   │   └── icons/
│   ├── main.ts
│   ├── router/
│   │   └── index.ts
│   ├── stores/
│   │   └── counter.ts
│   └── views/
│       ├── AboutView.vue
│       └── HomeView.vue
├── tsconfig.json
└── vite.config.ts

프로젝트의 건축적 측면에서 특히 다음을 발견했습니다.

• > 태그가 있는 index.html 파일; 전체 Vue 애플리케이션이 접목된
• main.ts, 앱 구성요소, 라우터 및 스토어의 연속 생성:

✔ Project name: … myproject-vue
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
? Add Vue DevTools 7 extension for debugging? (experimental) › No / Yes

• 라우팅 및 저장소 관리를 위한 순수 .ts 파일
• 일부 구성 및 테스트 파일
• ... 그리고 물론 구성 요소(일반적이고 재사용 가능한 요소에 해당)와 뷰(상위 수준에 해당)로 구분되는 *.vue 파일 페이지)

간단히 말하면 파일 아키텍처는 상용구에서 많은 옵션을 확인했음에도 불구하고 다소 단순하고 React의 아키텍처와 상대적으로 유사합니다.
지금까지 React에서 나온 것은 전혀 새로운 것이 아닙니다. 그러면 상당한 차이가 나타납니다!

Vue 파일의 아키텍처

다음은 공식 웹사이트에서 영감을 받은 코드 조각입니다. 클릭하면 텍스트 색상이 변경되고 해당하는 경우 "위의 텍스트는 녹색입니다"라는 문구가 표시되지만 이는 *.vue 파일의 일반적인 아키텍처를 나타냅니다.

vite v5.2.11 building for production...
✓ 48 modules transformed.
dist/index.html                      0.43 kB │ gzip:  0.28 kB
dist/assets/AboutView-C6Dx7pxG.css   0.09 kB │ gzip:  0.10 kB
dist/assets/index-D6pr4OYR.css       4.21 kB │ gzip:  1.30 kB
dist/assets/AboutView-CEwcYZ3g.js    0.22 kB │ gzip:  0.20 kB
dist/assets/index-CfPjtpcd.js       89.23 kB │ gzip: 35.29 kB
✓ built in 591ms

@click을 사용한 이벤트 바인딩, v-if를 사용한 조건부 표시, v-bind()를 사용한 CSS 바인딩에 주목하세요.

코드는 매우 뚜렷한 3가지 부분으로 구분됩니다.

• 스크립트: 제어 코드;
• 템플릿: HTML 구조;
• 스타일: CSS 스타일 시트

그리고 이 세 부분은 결코 섞이지 않습니다?.
이는 제가 클라이언트 프로젝트 경험을 통해 개인적으로 경험한 몇 가지 장점이 있습니다.

• HTML 구조는 명확하고 고정되어 있으며 매우 선언적 스타일입니다. 조건부로 표시되는 태그까지 포함하여 모든 것이 있습니다.
• 로직 부분과 디스플레이 부분이 잘 분리되어 있습니다.
• 타사 라이브러리를 설치하지 않고도 구성요소에 직접 연결되어 순수 CSS를 작성할 수 있습니다.
• 스타일 분리에도 불구하고 CSS에 변수를 삽입할 수 있습니다.

작은 단점: 선험적으로 자동 CSS 폴리필이 없습니다. 그러므로 오히려 vue-emotion과 같은 서점을 목표로 삼아야 합니다.

내 관점에서는 이런 종류의 "all-in-JS" 라이브러리가 Vue가 제공하는 아키텍처를 약간 깨뜨린다고 생각하며, 분명히 브라우저별 CSS 속성은 우리 시대에는 훨씬 더 드뭅니다. 따라서 de Vue는 자급자족하는 경우가 많습니다.

요컨대 이 올인원 아키텍처는 매우 쾌적하지만 섹션이 명확하게 구분되어 있습니다. 이를 통해 깨끗한 코드를 유지할 수 있을 뿐만 아니라 더 간결할 수 있습니다. 실제로 "비즈니스 로직 / 디스플레이 / 스타일" 3개 섹션이 동시에 존재하므로 코드를 더 작은 모듈, 즉 더 작은 파일로 다시 나누도록 권장하는 경우가 많습니다.

이제 Vue.js API 자체를 자세히 살펴볼까요?

Vue.js API

여기서는 제가 접한 Vue.js API의 모든 요소에 대한 전체 목록을 제공하지 않고 Vue의 논리를 상당히 대표하는 매우 구체적인 요소 중 일부만 제공합니다.

(재)계산된 값

React 세계에서 잘 알려진 작업부터 시작해 보겠습니다. 데이터 업데이트 후 HTML 렌더링(또는 변수)을 지능적으로 다시 계산합니다.
매번 출력 값을 다시 계산하지 않도록 기억 시스템(일종의 "캐시")을 활용하는 매우 직관적인 계산() 함수가 있습니다.

✔ Project name: … myproject-vue
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
? Add Vue DevTools 7 extension for debugging? (experimental) › No / Yes

여기서 MagicNumber는 pushBtn 값이 변경되는 경우에만 계산됩니다. 그리고 "다시 계산되었습니다!"라는 메시지가 확인 가능합니다. 다른 버튼을 클릭할 때만 콘솔에 표시됩니다.
그래서 React와 달리 이 함수에서는 모니터링할 변수를 명시적으로 지정할 필요가 없습니다.

동일한 맥락에서 React의 useEffect와 같이 구성 요소 속성 전체 또는 일부의 변경 사항에 각각 반응할 수 있게 해주는 watch 및 watchEffect도 있습니다.

vite v5.2.11 building for production...
✓ 48 modules transformed.
dist/index.html                      0.43 kB │ gzip:  0.28 kB
dist/assets/AboutView-C6Dx7pxG.css   0.09 kB │ gzip:  0.10 kB
dist/assets/index-D6pr4OYR.css       4.21 kB │ gzip:  1.30 kB
dist/assets/AboutView-CEwcYZ3g.js    0.22 kB │ gzip:  0.20 kB
dist/assets/index-CfPjtpcd.js       89.23 kB │ gzip: 35.29 kB
✓ built in 591ms

숫자 수정자 버튼을 클릭하기만 하면 "시계" 카운터가 증가합니다.
그런 다음 watch()를 사용하면 특정 변수가 변경될 때마다 콜백을 트리거할 수 있습니다.

이 기능의 강점은 변수 수정에 대한 심층 분석에 있습니다. Vue는 하위 객체 내 깊은 곳에서도 변화를 감지합니다!

양방향 동기화

상위 구성 요소에서 하위 구성 요소로 속성을 선언하고 전달하는 작업은 상당히 반복되는 작업입니다. 예를 들어 양식 입력에서 하위 항목과 상위 항목 간에 이 값을 동기화하는 것도 가능합니다.

또한 다음과 같이 속성과 이벤트 기반 업데이트 콜백을 모두 관리하는 대신

✔ Project name: … myproject-vue
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
? Add Vue DevTools 7 extension for debugging? (experimental) › No / Yes

… 작성을 단순화하는 대신 DefineModel 매크로를 사용할 수 있습니다.

vite v5.2.11 building for production...
✓ 48 modules transformed.
dist/index.html                      0.43 kB │ gzip:  0.28 kB
dist/assets/AboutView-C6Dx7pxG.css   0.09 kB │ gzip:  0.10 kB
dist/assets/index-D6pr4OYR.css       4.21 kB │ gzip:  1.30 kB
dist/assets/AboutView-CEwcYZ3g.js    0.22 kB │ gzip:  0.20 kB
dist/assets/index-CfPjtpcd.js       89.23 kB │ gzip: 35.29 kB
✓ built in 591ms

훨씬 짧아요! ? 게다가 모델이 하나뿐이어서 이름을 붙이지 않아도 될 정도였어요!

부모님과 함께:

.
├── README.md
├── e2e/
├── index.html
├── package.json
├── public/
├── src/
│   ├── App.vue
│   ├── assets/
│   ├── components/
│   │   ├── HelloWorld.vue
│   │   ├── TheWelcome.vue
│   │   ├── WelcomeItem.vue
│   │   ├── __tests__/
│   │   └── icons/
│   ├── main.ts
│   ├── router/
│   │   └── index.ts
│   ├── stores/
│   │   └── counter.ts
│   └── views/
│       ├── AboutView.vue
│       └── HomeView.vue
├── tsconfig.json
└── vite.config.ts

for 루프

v-model을 본 후 v-for를 계속 진행하면서 Vue.js가 암시적 코드를 통해 많은 "마법"을 도입하기 시작했다는 것을 깨달았습니다.

import './assets/main.css';

import { createApp } from 'vue';
import { createPinia } from 'pinia';

import App from './App.vue';
import router from './router';

const app = createApp(App); // composant racine

app.use(createPinia()); // store
app.use(router); // routage des pages front

app.mount('#app');

결과는 다음과 같습니다.

예상할 수 있듯이 v-for 명령어를 사용하면 반복 가능 항목의 각 요소에 대해 HTML 패턴(여기서는

태그)의 일부를 자동으로 반복할 수 있습니다.

React 측면에서는 JSX를 사용하여 각 요소를 직접 빌드해야 했기 때문에 구성 요소가 커짐에 따라 코드 읽기가 어려워졌습니다.

<script setup>
  import { ref } from 'vue';

  const color = ref('green');

  function toggleColor() {
    color.value = color.value === 'green' ? 'blue' : 'green';
  }
</script>

<template>
  <p class="main-text">
    Cliquez sur ce texte pour changer de couleur.
  </p>
  <p v-if="color === 'green'">Le texte ci-dessus est vert.</p>
</template>

<style scoped>
  .main-text {
    color: v-bind(color);
  }
</style>

개인적으로 저는 디버깅할 필요가 없는 한 코드 청결성 측면에서 Vue의 구조를 선호합니다. ?
그런데 디버깅에 관해 이야기하고 있으니 Vue 생태계 도구는 어떻습니까?

개발 도구

여기 내 프로젝트 개발에서 내 관심을 끌었던 3가지 도구가 있습니다.

VSCode 확장: Vue 공식

당연한 것부터 시작하겠습니다. 하지만 예, 구문 강조, 자동 완성, 스니펫 등을 추가하는 VSCode Vue(및 기타 IDE)용 확장이 있습니다. 필수!

그러나 때로는 약간 변덕스러울 수도 있는 색상 및 자동 완성에서 약간의 불안정성을 발견했으며, React 측면에서 더 큰 안정성을 감상할 수 있었습니다.

Vue.js 개발 도구

React 개발자 도구 브라우저 플러그인과 마찬가지로 Vue.js devtools 플러그인도 있는데, 이는 이미 매우 잘 제공되어 있습니다.

4개의 탭이 있습니다:

• 구성 요소, 관찰할 수 있을 뿐만 아니라 구성 요소의 상태를 수정할 수도 있습니다.
• 타임라인, 이벤트 및 구성 요소 렌더링 시간을 기록할 수 있으며 실제로는 브라우저의 "성능" 탭 버전에 해당하지만 Vue에 중점을 둡니다.
• 표준 스토어의 상태를 직접 관찰하고 수정할 수 있는 피니아, 기성품 통합이 특히 반가웠습니다.
• 다양한 도로와 해당 활동을 나열할 수 있는 경로 - 이것은 적당한 규모의 프로젝트에서 약간 눈에 띄지 않는 탭입니다(특히 정보가 "구성요소"의 정보와 중복되지 않기 때문에). " 탭이 있지만 복잡한 라우팅에 매우 유용할 수 있습니다.

간단히 말하면 디버깅에 필요한 모든 것, 그 이상이 있습니다!

Vuetify

거의 놀랄 일도 아니지만(하지만 장점은 동일합니다!) Google의 머티리얼 디자인을 구현하고 표준 아이콘 목록도 제공하는 Vue용 UI 라이브러리인 Vuetify도 있습니다.

✔ Project name: … myproject-vue
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
? Add Vue DevTools 7 extension for debugging? (experimental) › No / Yes

이렇게 하면 프로젝트 시작 시 또는 그래픽 사용자 정의가 많이 필요하지 않은 프로젝트에서 많은 시간이 절약됩니다.

하지만 늘 그렇듯이 이런 고급 라이브러리에서는 렌더링 성능에 주목하는 것이 좋습니다. 도서관의 구성 용량은 종종 다른 곳에서 지불됩니다!

결론

React에서 Vue로 마이그레이션한 경험에 대해 무엇을 말할 수 있나요?

우선 코드 관점에서 React와 비교하면 Vue lib는 다음과 같습니다.

• 더 구조화;
• 더 선언적 ;
• 더 간결해졌습니다.

그러나 JSX로 더 많이 작성된 코드 덕분에 React는 Vue보다 훨씬 더 상호 운용성이 뛰어나고 프로그래밍 방식이 더 명확하며 더 나은 린터 안정성을 유지하고 있습니다.

개발 환경과 커뮤니티 측면에서 Vue는 생산 단계까지 효율적인 개발을 보장할 수 있는 모든 카드를 보유하고 있습니다.

그렇다면 Vue의 이러한 기술 향상이 Vue의 악명에 걸맞게 유지되었나요? 나는 그렇다고 말할 것입니다. 학습 곡선이 효과적이라는 것을 알았으며 기회가 생기면 Vue를 통해 계속 개발할 것입니다.

마지막으로, 오늘은 React보다 Vue로 프론트엔드를 개발하는 것이 더 나을까요?
지극히 개인적인 관점에서는 그렇지 않다고 생각합니다. Vue와 React는 각각 적용 사례가 조금씩 다르지만, 저는 React를 사용하여 안정적인 타이핑 시스템과 보다 유연한 코드에 의존하는 것을 선호합니다. 하지만 Vue의 다음 버전과 해당 도구가 내 마음을 바꿀 수도 있을까요?

당신의 피드백은 무엇인가요?

위 내용은 React.js에서 Vue.js로 전환을 시도했습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!