Language/Vue
React와 Vue2 비교하기
conqueror-G
2022. 7. 28. 21:05
개발환경셋팅
React에서는 개발환경을 따로 셋팅할 필요가 없다.
Vue 개발환경셋팅
최초 1번만
npm install -g @vue/cli
warning이 뜨면 root 권한으로 설치
sudo npm install -g @vue/cli
프로젝트를 생성하려면?
React
npm create-react-app 프로젝트이름
Vue
vue create 프로젝트이름
- 뷰3 선택하고 엔터
- npm으로 설치한다고 선택
서버를 열려면?
React에서는?
npm start
Vue에서는?
npm run serve
어떤 파일이 Main일까?
React에서는 App.js가 Main-page
import React from "react";
const App = () => {
// 여기가 javascript 작성하는 곳
return (
// 여기가 html 작성하는 곳
);
};
// styled-coponents 라이브러리 설치시 css 작성하는 곳
const Button = styled.button``;
const Text = styled.span``;
export default App;
Vue에서는 App.vue가 Main-Page
<template>
<img alt="Vue logo" src="./assets/logo.png" />
안녕하세요
<HelloWorld msg="Welcome to Your Vue.js App" />
</template>
// 여기가 html 작성하는 곳
<script>
import HelloWorld from './components/HelloWorld.vue';
export default {
name: 'App',
components: {
HelloWorld,
},
};
</script>
// 여기가 javascript 작성하는 곳
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
// 여기가 css 작성하는 곳
데이터 바인딩을 할 때에는?
React에서는?
React는 JSX 문법으로 함수형 컴포넌트 안에 변수를 선언하고 반환하는 곳에 HTML을 적고 그 안에 데이터 바인딩을 했다. 그리고 vue와의 차이점으로 이 데이터 바인딩은 업데이트 되지 않는다. React에서 업데이트 된다는 것은 state의 값에만 한정되어있기 때문에 렌더링 되려면 state의 값이 변경되어야 한다.
<p>{DATA.price1} 만원</p>
const App = () => {
return (
<div>
<div>
<h4>xx 원룸</h4>
<p>{DATA.price1} 만원</p>
</div>
<div>
<h4>xx 원룸</h4>
<p>{DATA.price2} 만원</p>
</div>
</div>
);
};
export default App;
const DATA = {
price1: 60,
price2: 70,
};Vue에서는?
그런데 Vue는 이렇게 사용하는 것이 아니라 데이터 바인딩을 하고자 한다면 데이터 보관함을 하나 만들고 그것의 데이터를 바인딩하고자 한다면 이렇게 사용한다. 또한 이 data 보관함을 변경하면 data와 관련된 HTML에도 실시간으로 반영된다.
하지만 React와 마찬가지로 변하지 않는 데이터에 업데이트 되는 값들을 넣어줄 필요는 없다. 상수 데이터는 하드코딩하고 변수 데이터는 데이터 바인딩을 한다.
<p>{{ price1 }} 만원</p>
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<div>
<h4>XX 원룸</h4>
<p>{{ price1 }} 만원</p>
</div>
<div>
<h4>XX 원룸</h4>
<p>{{ price2 }} 만원</p>
</div>
</template>
<script>
export default {
name: 'App',
// data 보관함
data() {
return {
price1: 60,
price2: 70,
};
},
components: {},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
style에 변수를 넣고자 할때는?
React에서는?
React에서는 styled-components를 사용하지 않을때 className이나 inline 스타일로 변수로 넣었었다.
const App = () => {
return (
<div>
<div>
<h4>xx 원룸</h4>
<p style={{ color: DATA.color }}>`${DATA.price1} 만원`</p>
</div>
<div>
<h4>xx 원룸</h4>
<p>`${DATA.price2} 만원`</p>
</div>
</div>
);
};
export default App;
const DATA = {
price1: 60,
price2: 70,
color: "red",
};Vue에서는?
vue에서는 속성 앞에 : (세미콜론)을 붙이고 data에서 객체의 키를 불러오면 바인딩된다.
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<div>
<h4 :style="변수이름(color)">XX 원룸</h4>
<p>{{ price1 }} 만원</p>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
color: "red"
};
},
components: {},
};
</script>
반복되는 HTML을 반복문을 돌리고자 한다면?
React에서는?
map이라는 함수를 통해 반복문을 돌릴 수 있다. <div>태그가 두 번 반복된다.
const App = () => {
return (
<>
{DATA.map((city) => (
<div key={city.id}>{city.city}</div>
))}
</>
);
}
export default App;
const DATA = [
{ id: 1, city: "서울" },
{ id: 2, city: "대전" }
];
Vue에서는?
문법만 조금 다르고 React랑 비슷하다, React보다 편해보이기도 한다.! map함수로 html 반복할때 너무 어려웠는데, 여기서는 정말 쉽게 반복문을 사용할 수 있다. 3번 반복된다.
<template>
<div class="listItem" v-for="(item, index) in products" :key="index">
<h4>{{ item }}</h4>
<p>50 만원</p>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
menus: ['Home', 'Shop', 'About'],
products: ['역삼동 원룸', '천호동 원룸', '마포구 원룸'],
};
},
components: {},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
.menu {
background-color: darkslateblue;
padding: 15px;
border-radius: 5px;
}
.menu a {
color: white;
padding: 10px;
}
</style>
이벤트 핸들러를 사용하려면?
React에서는?
onClick이라는 속성을 사용해서 함수를 바인딩했다. upCount라는 함수는 count라는 상태값을 변경시키고 렌더링된다.
<Button onClick={upCount}>허위매물신고</Button>
const App = () => {
const [count, setCount] = useState(0);
const upCount = () => {
setCount(up => up + 1);
};
return (
<>
<Button onClick={upCount}>허위매물신고</Button>
<Text>신고수 : {count}</Text>
</>
);
};
const Button = styled.button``;
const Text = styled.span``;
export default App;
Vue에서는?
Vue 특징 : 데이터가 변하면 관련된 HTML은 자동으로 업데이트 된다. data는 일종의 state와 같다.
<button @click="increase">허위매물신고</button>
<template>
<div class="listItem">
<button @click="increase">허위매물신고</button>
<span>report : {{ report }}</span>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
report: 0,
};
},
methods: {
increase() {
this.report += 1;
},
},
components: {},
};
</script>
모달창 만들기
React에서는?
React에서는 State라는 상태값과 조건부 렌더링으로 모달창을 컨트롤 했었다.
const [toggled, setToggled] = useState(false);
const onSwitch = () => {
setToggled(prev => !prev);
};
<>
<Button onClick={onSwitch}>모달on</Button>
{toggled && <Text>123</Text>}
</>
import React from "react";
import { useState } from "react";
import styled from "styled-components";
const Detail = () => {
const [toggled, setToggled] = useState(false);
const onSwitch = () => {
setToggled(prev => !prev);
};
return (
<>
<Button onClick={onSwitch}>모달on</Button>
{toggled && <Text>123</Text>}
</>
);
};
const Button = styled.button``;
const Text = styled.span``;
export default Detail;
Vue에서는?
Vue에서도 역시 조건부 렌더링이라고 하는 어원은 아니겠지만 v-if라는 속성을 통해서 조건부로 렌더링을 한다
<button @click="toggle">모달on</button>
<span v-if="status">123</span>
methods: {
toggle() {
this.status = !this.status;
},
},
<template>
<button @click="toggle">모달on</button>
<span v-if="status">123</span>
</template>
<script>
export default {
name: 'App',
data() {
return {
status: false,
};
},
methods: {
toggle() {
this.status = !this.status;
},
},
components: {},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
</style>
export / import
React에서도 Vue에서도 방법은 같다
export하는 js파일은 여러가지 방법으로 export할 수 있다.
const assetsData = "none";
const imagesData = "yes";
export {assetsData, imagesData}
const toggled = () => {
return;
}
export default toggled;
import도 마찬가지로 가져올때 동일하게 가져온다.
import {assetsData, imagesData} from '';
import toggled from '';
조건문
React에서는?
간단한 조건중에 거짓이 null이라면 이런식으로 조건부 렌더링을 하고
{true && <div>on</div>}
null이 아니라 다른 것을 보여주거나 변경해야한다고 하면 삼항 연산자를 사용한다.
{true ? <div>on</div> : <div>off</div>
혹은 간단한 조건문이 아니라면 if else문을 사용한다.
const selecter = () => {
if(subway) {
return subway;
}
else if(university) {
return university;
}
}
Vue에서는?
조건이 하나라면 v-if만 작성하고 조건이 두개라면 v-else, 세개라면 v-else-if를 사용한다.
단 하나의 조건문을 사용하는 방법만 있는셈이다.
<templeate>
<div v-if="1 == 2">이거 보여주세양</div>
<div v-else-if="1 == 3">돌아가</div>
<div v-else>이거보여드릴게~</div>
</templeate>
Components
React에서는?
재사용 가능한 ui들의 조각을 Components라고 하는데, React에서는 components를 이렇게 만든다.
- components라는 폴더에 생성하려는 components의 이름으로 js를 만든다.
- 필요한 내용을 작성하고, 사용하려는 js파일에서 import를 해온다.
- 사용한다.
Modal.js
const Modal = () => { // 1
return (
<div>모달이에용</div>
);
}
export default Modal;
App.js
import Modal from "./components/Modal"; // 2
const App = () => {
return (
<Modal /> // 3
);
}
export default App;
Vue에서는?
Vue에서도 전체적인 방법은 같지만 등록한다 라는 개념이 상이하다.
- components라는 폴더에 생성하려는 components의 이름으로 vue를 만든다.
- 필요한 내용을 작성한다, 사용하려는 vue파일에서 import를 한다.
- components에 등록한다.
- 사용한다.
Modal.vue
// 1
<template>
<div>모달임</div>
</template>
<script>
export default {
name: 'TheModal',
};
</script>
<style></style>
App.vue
<template>
<Modal /> // 4
</template>
<script>
import Modal from "./components/Modal"; // 2
export default {
name: 'App',
components: { Modal }, // 3
};
</script>
<style></style>