Vue와 React의 차이

런타임 퍼포먼스

렌더링 성능

• Vue와 React 모두 가상 DOM 추상화를 사용하여 DOM 조작을 수행합니다.
• 하지만, Vue의 가상 DOM 구현(snabbdom의 포크)은 훨씬 가벼우므로 react보다 더 적은 오버 헤드가 발생합니다.

갱신 성능

• React: 컴포넌트의 상태가 변경되면 해당 컴포넌트에서 루트로 시작하여 전체 컴포넌트 하위 트리를 다시 렌더링합니다.
• Vue: 컴포넌트의 종속성을 렌더링 중 자동으로 추적되므로 시스템은 실제로 다시 렌더링해야 하는 컴포넌트를 정확히 알고 있습니다.

HTML & CSS

JSX vs Template

• React: 모든 컴포넌트를 JSX를 사용하는 렌더링 함수를 통해 UI를 표현합니다.
  (JSX: JavaScript에서 작동하는 선언적인 XML 유사 문법)
• Vue: 기본적으로 템플릿하고 JSX도 사용 가능합니다.
• 템플릿 사용의 장점
  • HTML로 작업해온 많은 개발자들에게 템플릿을 읽고 쓰는 것이 어렵지 않습니다.
  • HTML 기반 템플릿을 이용하면 기존의 어플리케이션을 Vue로 점진적으로 이전하기가 훨씬 쉽습니다.
  • Vue 템플릿을 쓸 때 Pug(이전의 Jade) 같은 프리프로세서를 사용할 수도 있습니다.

• React의 JSX

const render = ({ text, handleClick }) => {
  return (
    <>
      <button onClick={handleClick}>눌러줘</button>
      <p>{text}</p>
    </>
  )
}

• Vue의 Template

<div id="root">
  <button v-on:click="handleClick">눌러줘</button>
  <p>{{text}}</p>
</div>

CSS

• React

  • CSS-im-JS(ex. styled-components) 사용
  • 컴포넌트 지향 스타일 패러다임
  • 스타일이 제대로 작동하려면 런타임이 번들에 포함되는 것이 일반적 (역동적인 스타일 good but, 번들 크기 및 런타임 비용 증가)

• Vue

  • CSS-in-JS 라이브러리들도 Vue 지원
  • 기본 스타일링 방식은 싱글 파일 컴포넌트

  <style scoped>
    @media (min-width: 250px) {
      .list-container:hover {
        background: orange;
      }
    }
  </style>

참고) CSS-in-JS

• 중복되지 않는 class 이름을 고려할 필요가 없습니다.
• JS 코드와 CSS가 상태 값을 공유할 수 있습니다.
• 컴포넌트와 스타일 코드를 쉽게 오갈 수 있습니다.
• 자동으로 vendor-prefix을 붙여준니다.

규모

규모 확장

1) 상태 관리

• React: Redux
• Vue: Redux 사용 가능, Vuex(Redux를 발전시킨 모델)

2) 상태 관리 및 라우팅을 위한 기타 라이브러리

• React: 커뮤니티에 결정을 맡기고 더 분열된 생태계를 만들었습니다.
• Vue: 모두 공식적으로 지원되며 핵심 라이브러리와 함께 최신 상태로 유지합니다.

3) 프로젝트 구축

• React: create-react-app
• Vue: CLI 프로젝트 생성기를 톨해 대화형식의 프로젝트 구축마법사를 이용해 새로운 프로젝트를 시작할 수 있습니다.