React25일차-mobx

안녕하세요 오랜만입니다. 몇일동안 혼자서 강의보면서 뭐 만들다가 와서 글이 없었어요. 오늘은 mobx를 하겠어요

create-react-app 으로 폴더 만들고

npm i mobx
npm i mobx-react
npm i autobind-decorator
npm i customize-cra react-app-rewired -D

이렇게 다 설치해주세요

우선 package.json 으로 이동해주세요

여기서 scripst 내부에 eject빼고 

react-scripts를 react-app-rewired 로 변경해주세요

그리고 기본 폴더에서 config-overrides.js 와 jsconfig.json 파일을 만들어주세요

config-overrides.js

const { override, addDecoratorsLegacy } = require("customize-cra");

module.exports = override(addDecoratorsLegacy());

 jsconfig.json 

{

  "compilerOptions": {

    "experimentalDecorators": true

  }

}

이렇게 작성해주세요

이걸 왜하냐하면 우리가 보통 ejcet해서 cra를 해체한다음 해야되는데 이렇게 해서 webpack 수정을 해체 없이 수행할수있습니다.

index.js

import 부분 밑에 

import { autorun, observable } from "mobx";

const nim = observable(0);

autorun(() => {

  console.log(nim.get());

});

nim.set(1);

이렇게 추가하고 npm start해서 콘솔창을 보면

이렇게 되있다.

로그는 한번만 찍었느데 두개가 찍혔있습니다.

이건 바로 observable와 autorun때문입니다. 즉 observable로 만든 것이 설정되거나 변할때마다 autorun에 있는 함수를 실행하게 됩니다. 그리고 저렇게 객체가아닌 숫자나 fasle이런것을 넣었으면 get,set을 이용해서 데이터를 변경 출력 해주어야 합니다. 그럼 객체면 어떻게 되느지 보겠습니다. 따라하지 않아도 됩니다.

const nim = observable({ add1: 0, add2: 3 });

autorun(() => {

  console.log(nim.add1);

});

nim.add1 = 4;

즉 객체를 넣으면 그냥 일반적으로 데이터를 변경하는거 처럼해주시면 됩니다

그럼 이제 index.js

import React from "react";

import ReactDOM from "react-dom";

import "./index.css";

import App from "./App";

import reportWebVitals from "./reportWebVitals";

import { makeObservable, observable } from "mobx";

class add {

  @observable

  add1 = 1;

  @observable

  add2 = 2;

  constructor() {

    makeObservable(this);

  }

  clicked() {

    this.add1 = this.add1 + 1;

    console.log(this.add1);

  }

}

export const added = new add();

ReactDOM.render(

  <React.StrictMode>

    <App />

  </React.StrictMode>,

  document.getElementById("root")

);

// If you want to start measuring performance in your app, pass a function

// to log results (for example: reportWebVitals(console.log))

// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

reportWebVitals();

이렇게 수정해주세요

우리가 아까 autobind를 설치했습니다. @를 통해서 observable이랑 밑에있는 add1,add2를 묶어주는 것입니다.

constructor() {

    makeObservable(this);

  }

 이렇게 생성자에 넣어주면 여기 변수들은 모두를 지켜보고잇다가 변화를 인지하게 될것입니다.

App.js로 가서

import logo from "./logo.svg";

import "./App.css";

import { added } from "./index";

import { observer } from "mobx-react";

function App() {

  return (

    <div className="App">

      <header className="App-header">

        <img src={logo} className="App-logo" alt="logo" />

        <p>{added.add1}</p>

        <button onClick={click}>증가</button>

      </header>

    </div>

  );

  function click() {

    added.clicked();

  }

}

export default observer(App);

즉 생성한 클래스로 만든 added를 가져와서 이렇게 만들어주고 npm start창을 열면 에러가 뜰것입니다.

이건 왜이런지 정확히 모르겠으니 x눌러서 꺼주시고

이렇게 버튼을 누를때마다 콘솔이 찍히고 숫자가 증가하는게 반영됩니다. 원래는 반영이 안되느게 정상인데 왜 될까요??

바로

export default observer(App);

 

이부분 때문입니다. App 내부에 관련된 것이 변경이 있으면 자동으로 다시 rendering해서 데이터 변경을 반영해주는 겁니다.

 

오늘도 다들 고생많으셔습니다.