본격 React 프로젝트 워밍업

프로젝트 만들기에 앞서 워밍업으로 인터넷에 널려 있는 React 예제들을 한 번 구동시켜 보기로 했다.

 

src/Counter.js

import React, { Component } from 'react';

import { decorate, observable, action } from 'mobx';

import { observer } from 'mobx-react';

 

class Counter extends Component {

  number = 0;

 

  increase = () => {

    this.number++;

  }

 

  decrease = () => {

    this.number--;

  }

 

  render() {

    return (

      <div>

        <h1>{this.number}</h1>

        <button onClick={this.increase}>+1</button>

        <button onClick={this.decrease}>-1</button>

      </div>

    );

  }

}

 

decorate(Counter, {

  number: observable,

  increase: action,

  decrease: action

})

 

export default observer(Counter);

 

 

카운터 페이지를 만들려고!

이거를 App.js에 반영시킨다.

 

 

import React from 'react';

import './App.css';

import MainContainer from './Container/MainContainer';

import Counter from './Counter';

 

function App() {

  return (

    <div>

     <Counter />

    </div>

    

  );

}

 

export default App;

 

 

그러면 짜잔 간단한 카운터가 완성됐다. 허접쓰

카운터 페이지