본문은 동일한 ToDo 앱을 React와 Vue로 구현하여 두 프레임워크의 실제 코드 차이를 비교한다. 주요 차이점은 데이터 변경(Mutation) 방식이다. Vue는 데이터 객체를 직접 수정하면 자동으로 변경을 감지하고 업데이트하지만, React는 `setState`를 통해 명시적으로 상태를 변경해야 한다. 이는 React가 상태 변경 시 라이프사이클 훅을 다시 실행하기 위해 변경 사항을 추적해야 하기 때문이다. 또한 파일…
7 min read
React vs Vue: 동일 앱 구현을 통한 차이점 비교 (번역)
Source
Evernote/Inbox/React와 Vue에서 똑같은 앱을 만들어보고 그 차이점에 대해 썼다.(번역글) – Erwinousy – Medium.md
Summary
본문은 동일한 ToDo 앱을 React와 Vue로 구현하여 두 프레임워크의 실제 코드 차이를 비교한다. 주요 차이점은 데이터 변경(Mutation) 방식이다. Vue는 데이터 객체를 직접 수정하면 자동으로 변경을 감지하고 업데이트하지만, React는 setState를 통해 명시적으로 상태를 변경해야 한다. 이는 React가 상태 변경 시 라이프사이클 훅을 다시 실행하기 위해 변경 사항을 추적해야 하기 때문이다. 또한 파일 구조 측면에서 Vue CLI는 스타일을 컴포넌트 파일 내에 포함하는 반면, create-react-app은 별도의 CSS 파일을 생성하는 경향이 있다.
Key Points
동일한 ToDo 앱을 React(create-react-app)와 Vue(vue-cli)로 구현하여 비교함.
파일 구조: Vue는 스타일을 컴포넌트 파일 내부에 포함하는 경향이 있고, React는 별도 CSS 파일을 생성하는 경우가 많으나 이는 취향의 문제임.
데이터 변경(Mutation): Vue는 this.name = 'John'처럼 데이터를 직접 할당하여 변경 가능함.
데이터 변경(Mutation): React는 this.state.name을 직접 수정할 수 없으며, this.setState({name: 'John'})를 호출해야 함.
React가 setState를 요구하는 이유: 상태 변경 시 라이프사이클 훅(componentWillReceiveProps, render 등)을 다시 실행하기 위해 변경 사항을 감지해야 하기 때문임.