react 그리고 vue(너와 나)

react와 vue 이 둘은 data를 어떻게 변경할까?

react는 state 객체를 만들고 데이터를 변경하기위한 별도의 작업(state를 조작하기 위한)을 수행하고, vue는 data 객체를 생성한 후에 data를 자유롭게 변경할 수 있다.

react

constructor(props) {
  super(props);
  this.state = {
    list: [
      {.......},
      {.......}
    ],
    name: 'seongho'
  }
}

vue

data() {
  return {
    list: [
      {.......},
      {.......}
    ],
    name: 'seongho'
  }
}

name을 변경해보자.
react에서는

this.name = "react lover";

이렇게 직접적으로 변경하면 안된다.
직접적으로 변경하면 react 내부적으로 state(name data)가 변경 될때마다 변경 감지를 유지해야하고 라이프사이클 실행 등을 위해 더 많은 작업을 하게 된다.
따라서 state를 변경하기 위해 존재하는 setState() 함수를 이용해서 변경해야한다.

this.setState({
  name: 'react lover;
})

반면 vue에서는

this.name = "vue lover";

이렇게 변경할 수 있다.
vue에서는 이처럼 변경하면 setState()를 내부적으로 결합해준다.

ToDo List 생성해보기

react

<input type="”text”" value="{this.state.todo}" onChange="{this.handleInput}" />

createNewToDoItem = () => {
    this.setState( ({ list, todo }) => ({
    list: [
      …list,
      {
      todo
      }
    ],
    todo: ''
   })
  );
};

handleInput = e => {
    this.setState({
        todo: e.target.value
    });
};

handleInput 함수를 input 요소의 onChange에 바인딩했습니다.
즉, input 요소에서 onChange 이벤트가 발생할때마다 handleInput 함수가 실행됩니다.
이때도 this.state.todo = e.target.value;가 아닌 this.setState()를 사용하여 state(data)를 변경했습니다.

새로운 ToDo를 List에 추가할때도 this.setState()를 사용하여 state(data)를 변경했습니다.

이는 단방향의 데이터 바인딩입니다.
즉 js를 이용해서 데이터를 변경하고 화면에 렌더링하는 구조입니다.

vue

<input type="”text”" v-model="”todo”" />

createNewToDoItem() {
    this.list.push(
        {
            'todo': this.todo
        }
    );
    this.todo = '';
}

vue는 input에서 v-model을 호출하여 todo와 바인딩합니다.
v-model은 react와는 다른 양방향 데이터 바인딩인데, js를 이용해서 데이터를 변경할 수 있고, 화면에서 input의 값을 바꿈으로 js의 data도 같이 변경됩니다.
따라서 handleInput 함수를 구현하지 않아도 됩니다.

새로운 ToDo를 List에 추가할때도 list에 직접 접근하여 array 메소드인 push를 사용해 직접적으로 배열을 변경합니다.

react와 vue의 공통점

자바스크립트 라이브러리이며, SPA이다.
가상 DOM을 활용한다.
반응적이고 조합 가능한 컴포넌틀르 제공한다.
코어 라이브러리(view)에만 집중하고 있고 라우팅 및 전역 상태를 관리는 별도의 라이브러리를 사용한다.

UI를 렌더링 할 때 DOM을 조작하는 것이 가장 비용이 많이 드는 작업이고 아쉽게도 필요한 DOM 조작 수를 최소화함으로서 렌더링 성능을 끌어올립니다.

상태가 없고 인스턴스가 없는 컴포넌트를 제공하므로 오버 헤드가 적다.

react와 vue의 차이점

자바스크립트의 오버헤드는 필요한 DOM 작업을 계산하는 메커니즘과 직접적으로 관련되어 있다.
react와 vue는 가상 DOM을 사용하지만 vue의 가상 DOM 구현은 훨씬 가벼워 react보다 더 적은 오버 헤드가 발생합니다.

react에서는 컴포넌트의 상태가 변경되면 해당 컴포넌트에서 시작하여 하위에 있는 모든 컴포넌트를 다시 렌더링한다.
불피요한 자식 컴포넌트의 재렌더링을 피하려면 자식 컴포넌트에서 shouldComponentUpdate를 구현하고 변경 불가능한 데이터 구조를 사용해야 한다.
vue에서 컴포넌트의 종속성은 렌더링 주우 자동으로 추적되므로 시스템은 실제도 다시 렌더링해야하는 컴포넌트를 정확히 알고있다.
즉, 최적화되지 않은 vue의 업데이트는 최적화되지 않은 react보다 빠르며 실제로 vue의 렌더링 성능이 향상되므로 완전히 최적화된 react도 보통 vue가 기본 제공되는 것보다 느리다.

react에서는 모든 것이 자바스크립트이다.
JSX를 통해서 HTML 구조를 만들 뿐만 아니라 CSS 관리도 자바스크립트에서 하는 추세다.
반면 vue는 고전적인 웹기술들을 받아들였습니다.
react에서 모든 컴포넌트는 JSX를 사용하는 렌더링 함수를 통해서 UI를 표현한다.
JSX는 자바스크립트에서 작동하는 선언적인 XML 유사 문법이다.
JSX를 사용하는 렌더링 함수의 장점은 변수, 흐름 제어, 스코프 내에서 자바스크립트의 값을 가져다 쓸 수 있는 등등.
vue에서도 렌디렁 함수에 JSX를 쓸 수 있다.
하지만 기본적으로는 템플릿을 사용한다.
템플릿을 사용하는 장점은 HTML 기반 템플릿을 이용하면 기존 어플리케이션을 vue로 점진적으로 이전하기 쉽다.
템플릿 문법을 써서 개발자들이 더 적은 코드로 더 많은 것을 처리할 수 있다.(@on, @click, @change 등)
JSX나 렌더링 함수를 쓰면 같은 일을 처리하기 위해 더 많은 코드를 써야 한다.