React vs. Vue.js 특징과 차이점이 뭐에요?

1. 개요 및 역사

React:

• 개발사: Facebook에서 개발.
• 출시 연도: 2013년.
• 특징: 컴포넌트 기반 아키텍처, 단방향 데이터 흐름.

import React from 'react';
import ReactDOM from 'react-dom';

function App() {
    return <h1>Hello, World!</h1>;
}

ReactDOM.render(<App />, document.getElementById('root'));

Vue.js:

• 개발사: Evan You에 의해 개발.
• 출시 연도: 2014년.
• 특징: 반응형 데이터 바인딩, 양방향 데이터 바인딩.

<div id="app">
    {{ message }}
</div>

<script>
new Vue({
    el: '#app',
    data: {
        message: 'Hello, World!'
    }
});
</script>

 

 

 

2. 컴포넌트 구조

React:

• JSX: JavaScript와 XML을 혼합한 문법 사용.

function Greeting() {
    return <h1>Hello, World!</h1>;
}

export default Greeting;

 

Vue.js:

• 단일 파일 컴포넌트: 템플릿, 스크립트, 스타일을 하나의 파일에 포함.

<template>
  <h1>{{ message }}</h1>
</template>

<script>
export default {
    data() {
        return {
            message: 'Hello, World!'
        };
    }
};
</script>

<style scoped>
h1 {
    color: blue;
}
</style>

 

 

 

3. 데이터 바인딩

React:

• 단방향 데이터 바인딩: 데이터가 부모에서 자식으로 흐름.

function ParentComponent() {
    const [message, setMessage] = React.useState('Hello, World!');
    return <ChildComponent message={message} />;
}

function ChildComponent({ message }) {
    return <h1>{message}</h1>;
}

Vue.js:

• 양방향 데이터 바인딩: v-model 디렉티브 사용.

<div id="app">
    <input v-model="message" />
    <p>{{ message }}</p>
</div>

<script>
new Vue({
    el: '#app',
    data: {
        message: 'Hello, World!'
    }
});
</script>

 

 

 

4. 상태 관리

React:

• 상태 관리 라이브러리: Redux, Context API 등.

import React, { useReducer, useContext, createContext } from 'react';

const StateContext = createContext();

const initialState = { message: 'Hello, World!' };

function reducer(state, action) {
    switch (action.type) {
        case 'SET_MESSAGE':
            return { ...state, message: action.payload };
        default:
            return state;
    }
}

function StateProvider({ children }) {
    const [state, dispatch] = useReducer(reducer, initialState);
    return (
        <StateContext.Provider value={{ state, dispatch }}>
            {children}
        </StateContext.Provider>
    );
}

function App() {
    const { state, dispatch } = useContext(StateContext);
    return (
        <div>
            <h1>{state.message}</h1>
            <button onClick={() => dispatch({ type: 'SET_MESSAGE', payload: 'Hi, Universe!' })}>
                Change Message
            </button>
        </div>
    );
}

export default function Main() {
    return (
        <StateProvider>
            <App />
        </StateProvider>
    );
}

 

Vue.js:

• 상태 관리 라이브러리: Vuex.

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        message: 'Hello, World!'
    },
    mutations: {
        setMessage(state, message) {
            state.message = message;
        }
    },
    actions: {
        updateMessage({ commit }, message) {
            commit('setMessage', message);
        }
    },
    getters: {
        message: state => state.message
    }
});

 

<template>
    <div>
        <h1>{{ message }}</h1>
        <button @click="changeMessage">Change Message</button>
    </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';

export default {
    computed: {
        ...mapGetters(['message'])
    },
    methods: {
        ...mapActions(['updateMessage']),
        changeMessage() {
            this.updateMessage('Hi, Universe!');
        }
    }
};
</script>

 

 

 

 

5. 라우팅

React:

• React Router: SPA(Single Page Application) 라우팅을 관리.

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

function Home() {
    return <h1>Home</h1>;
}

function About() {
    return <h1>About</h1>;
}

function App() {
    return (
        <Router>
            <nav>
                <Link to="/">Home</Link>
                <Link to="/about">About</Link>
            </nav>
            <Switch>
                <Route exact path="/" component={Home} />
                <Route path="/about" component={About} />
            </Switch>
        </Router>
    );
}

export default App;

 

Vue.js:

• Vue Router: SPA 라우팅을 관리.

// router.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

Vue.use(Router);

export default new Router({
    routes: [
        { path: '/', component: Home },
        { path: '/about', component: About }
    ]
});

<template>
    <div>
        <nav>
            <router-link to="/">Home</router-link>
            <router-link to="/about">About</router-link>
        </nav>
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    name: 'App'
};
</script>

 

 

 

 

6. 생태계 및 커뮤니티

React:

• 생태계: 광범위한 커뮤니티와 다양한 라이브러리.
• 예시: 다양한 UI 컴포넌트 라이브러리(예: Material-UI, Ant Design).

Vue.js:

• 생태계: 빠르게 성장하는 커뮤니티와 풍부한 플러그인.
• 예시: Vue CLI, Vuetify와 같은 강력한 도구와 라이브러리.