2분 만에 알게 된 Vue와 React의 비교.

Nuxt(Vue)를 계속 사용하다가 최근에 Next(React)로 갈아탔어요.
지금까지 느낀 Vue와 React의 차이점에 대해 간단하게 요약하였다.
망설이시는 분들은 참고해주세요.

외관

자세한 내용은 링크 주소를 보십시오.
여기 분위기밖에 없어요.
Vue는 단일 파일 구성 요소

<template>
  <div>
    Hello, {{ name }}!
  </div>
</template>

<script>
export default {
  data() {
    name: 'John'
  }
}
</script>

<style scoped>
</style>

React는 JSX

const Hello = () => {
  const [name, setName] = useState('John')

  return (
    <div>
      Hello, {name}!
    </div>
  )
}

export default Hello

CSS

Vue의 CSS는 구성 요소의 <style> 내에만 쓰이거나 <template> 내의 DOM에 속성을 직접 추가할 수 있습니다.
리액트 스타일이 많은데 종교전쟁이 일어났어요
크게 CSS in JS와 CSS Modules로 나뉘는데 이 CSS in JS의 라이브러리는 많은데...
잠시 이야기를 나누다

학습 원가

둘 다 구성 요소 단위로 쓰기 때문에 반드시 상응하는 설계를 배워야 한다
Vue에는 plugen 개념이 있고 라이프 사이클 방법도 많습니다.
Nuxt에는 Vue라는 개념 외에도 많은 카탈로그 구조의 속박이 있으니 건드리려는 분들은 각오하세요.
물론 기능이 많으면 편리하지만, 반대로 학습 원가도 높아진다
React는 DOM의 함수(Functional Component)를 다시 쓰기만 하면 export가 구성 요소가 되고 모듈의 구성도 일반적인 JS를 쓰기에 좋은 인상을 준다.
JS만 알면 마음대로 개발할 수 있다

문서

Vue는 공식 문서가 친근하다는 인상을 주는데요.
v3 아직 없는 것 같아요. v2일본어도 지원해요.
v3일본어도 지원할 것 같아요.
React는 Vue보다 4배 더 잘 쓴다고 합니다(npm의 Weekly Downloads 수비). 검색하면 대부분의 질문에 답이 있습니다.
하지만 GiitHub star 수로 볼 때 Vue는 말이 조금 많기 때문에 Vue의 유지보수 능력이 약하다고 생각합니다.

상태 관리

VueVuex와 ReactRedux가 인기가 많아요.
저는 Vuex가 더 쉽게 이해할 수 있지 않나요?
그래서인지 레드ux의 학습 원가가 높습니다!이렇게 말하면 존경을 받지 못할 수도 있어요.
아직 말할 정도는 아니니까 앞으로 빚이 남는다면 이렇게 공부하는 게 좋을 것 같아요.
"Redux는 알지만 복잡하고 싫어요"아니면 "어쨌든 Redux는 힘들고 힘들어요".
Redux Toolkit도 있어요. 아주 편리해요. 꼭 보세요.

Type Script 지원

드로잉 부분은 기본적으로 DOM 작업이므로 TS에 해당하므로 변경되지 않는다고 생각합니다.
따라서 기본적으로 상태 관리 프레임워크의 비교이다
action이 문자열로 지정된 상태 관리 프레임워크가 비교적 많고 Vuex도 예외가 아니지만 Redux는 다르다
action은 대상이며, 그 생성은 Action Creator라는 함수에 의해 이루어진다. (자세한 내용은 다음과 같다.)
레드ux와 TS는 친화력이 좋아서 TS면 리액트인 것 같아요.
Vue도 나쁘지는 않지만, Vuex를 탈 때마다 style 느낌이 들어요.

한마디로?

Vue는 모든 준비가 되어 있고 React의 자유도가 높습니다.
Vue가 쓸데없는 일에 참견하면 React는 반드시 스스로 해야 한다

총결산

개인적으로 프로그램 설계 초중급자가 Vue 가상 DOM에서 데뷔했다
제가 지쳤을 때 React에 들어가면 딱 좋잖아요.
예컨대 지금까지 Node 쓰기 서버였고, 프런트에 손을 뻗어 보려는 사람은 React를 추천한다.
서버로 TS라고 썼다면 압도적인 React 추천