리액트와 뷰

리액트와 뷰 비교

참고 https://kr.vuejs.org/v2/guide/comparison.html

다른 프레임워크와의 비교 — Vue.js

 

[공통점]

1. Virtual DOM 사용

2. 반응형 컴포넌트를 조합하여 프로젝트 구축

3. 코어 UI 라이브러리에 집중함. 라우터 및 스토어 등의 기능은 별개의 라이브러리를 추가로 사용해야 함

 

[차이점]

1. 재렌더링

Vue는 재렌더링시 컴포넌트간의 종속성을 추적해 재렌더링이 필요한 컴포넌트에 한해서만 렌더링을 수행함

React는 부모 컴포넌트에 종속된 하위 컴포넌트들이 모두 재렌더링 됨. 상태 변화와 무관한 컴포넌트도!

 

Vue는 이러한 측면에서 vue의 렌더링이 react보다 효율적이라고 소개한다.

 

그래서 가시적으로 확인 가능한 테스트 코드를 직접 만들어봄

 

우선 react와 vue로 모두 다음과 같은 구조의 간단한 샘플을 만들었다.

- Parent 컴포넌트에 sub2, sub3 컴포넌트가 자식 컴포넌트로 들어간다.

- Parent 컴포넌트는 sub2, sub3 에 각각 count 값을 props 전달해줬다. Parent에서 button을 누르면 이 값을 증가 시킨다.

 

[vue의 경우]

버튼이 변경시킨 값(sub2 또는 sub3)을 props으로 받는 자식 컴포넌트만 독립적으로 재렌더링이 일어남

즉 sub2 값을 변경시킨다고 sub3 컴포넌트가 재 렌더링 되지는 않음

 

[React의 경우]

반면 리액트는 어떤 버튼을 누르든 자식 컴포넌트인 sub2, sub3가 모두 재 렌더링이 일어난다.

내 props가 변경되었는지 아닌지는 신경쓰지 않고 렌더링 함수가 호출되어버리는 것.

 

 

리액트는 여러가지 방법으로 이에 대한 최적화 방법을 제공한다.

클래스형 컴포넌트의 경우 ?

함수형 컴포넌트의 경우 useMemo

memo는 말 그대로 컴포넌트에 대해 메모이제이션 기능을 제공하는 hook이다

변경사항이 없으면 렌더링을 다시 수행하지 않고 메모된 값을 반환한다.

 

하지만 공식 문서는 다음과 같은 주의사항을 표기한다.

useMemo는 성능 최적화를 위해 사용할 수는 있지만 의미상으로 보장이 있다고 생각하지는 마세요.
가까운 미래에 React에서는, 이전 메모이제이션된 값들의 일부를 “잊어버리고” 다음 렌더링 시에 그것들을 재계산하는 방향을 택할지도 모르겠습니다. 
useMemo 를 사용하지 않고도 동작할 수 있도록 코드를 작성하고 그것을 추가하여 성능을 최적화하세요.

 

memo를 맹신하지 말 것. 애초에 코드를 신경써서 작성하자.

관련 내용 https://kline1103.tistory.com/134

리액트 꿀팁 메모메모

 

여튼 그래서 결론은

vue로 플젝 할 때는 알아서 변경된 부분만 감지해서 재 렌더링이 이루어지니 렌더링 호출 로직 자체에는 크게 신경쓰지 않았음.  

리액트로 새삼 고민하려니 어려움.

 

 

https://ko.reactjs.org/docs/hooks-reference.html#usememo

Hooks API Reference – React

 

https://ui.toast.com/weekly-pick/ko_20190731

React.memo() 현명하게 사용하기 | TOAST UI :: Make Your Web Delicious!

 

 

2. 템플릿 문법

vue는 html형태글 그대로 사용하며 데이터와 메서드를 바인딩한다.

react는 JSX식을 사용하여 상대적으로 러닝커브가 높다.

 

3. 생태계

vue는 라우터, 스토어(vuex)를 공식에서 지원한다. 

react는 커뮤니티가 이를 담당한다. 상대적으로 생태계가 풍부하다.

 

4. style

vue는 stlye scoped를 이용해 컴포넌트에 종속되는 style을 지정할 수 있다.  

react는 기본적으로 style은 전역으로 바인딩된다. 별도의 scoped-css-loader를 사용해서 이를 종속시킬 수 있다

 

[그 외에 내가 직접 경험하면서 느낀 차이점]

1. state 불변성

vue는 data객체에 있는 모든 속성이 리액트의 state처럼 vue의 반응형 시스템에 추가됨. (참고) 

하지만 data 변경을 위한 래퍼 함수? 어떠한 특별한 로직을 강제하지 않는다. 그냥 마구 재할당하면서 변경 할 수 있음.

원시 타입 데이터를 변경할 경우는 문제가 되지 않지만 레퍼런스 타입, 즉 객체 하위 타입등은 주의해야 함. 

object나 array등을 통채로 갈아치우지 않고 내부 속성만 변경하면 vue가 변경을 감지하지 않음.

사실 이건 리액트의 state도 동일하다. 그래서 object나 array 타입은 spread 연산자로 새 값을 만들고 속성을 변경한뒤 통채로 갈아끼워야 함. 

하지만 react는 setState (클래스형) / useState (함수형)로 state에 대한 변경 방식 자체를 보다 깐깐하게 제공한다.

그래서 관련 내용이 머리에 쏙 박히는 것과 달리 vue는 data 관련 내용 자체를 후루룩 넘겼다가 나중에 watch가 반응을 안 하길래 어 왜 안돼? 하고 찾아보는 그런 불상사가 있었음...

이건 리액트 방식이 더 나은 듯. 

애초에 공식 도큐면트가 깐깐하게 가이드라인을 만들어 놓는게 초반에 개념을 혼동하지 않게 하는데 도움이 됨.

 

2. 가독성

vue는 .vue 파일 안에

<template>

<script>

<style> 

해서 고전적인 느낌의 html, js, css가 한 눈에 쏙 들어오는 구조를 유지함. 

script 내에서도 데이터는 data 객체 안에, 사용자 func은 method 안에, 그 외 라이프사이클 관련 훅은 훅대로, watch와 computed도 독립적으로 구역이 딱딱 나눠진 느낌.

 

반면에 react는 기본적으로 구조 자체가 기존 js 스타일에 익숙한 사람들에게는 덜 직관적임

클래스형 컴포넌트 같은 경우는

class ~~ extends React.component{ ... } 가 기본 틀이 되고, 

그 안에 필요하다면 contructor와 라이프 사이클 훅과 기타 user func들이 그냥.. 다.. 같은 위상으로 들어감.

템플릿은 render() 함수 내에 JSX식에서 확인해야 함. style 지정도 css 파일 따로 생성해줘야하고.

함수형 컴포넌트는 더 가관임.. 컴포넌트를 생성할 func의 리턴값이 일단 그 컴포넌트의 템플릿임. 

그 안에 sate, useState, useEffect, 사용자 func 등이 또 그냥 다.. 같은 위상으로 막.. 같이 들어감....

아무리 정돈하려 해도 좀 지저분한 느낌.

물론 vue도 나중에 플젝 크기가 커지면서 style같은 경우는 다 따로 css 파일 따로 빼서 관리하고 하긴 했지만...

여튼 처음 시작할 때 러닝커브를 결정짓는 데에 이런 소소한 것들이 다 영향을 준다고 생각함.