Axios

Axios Type

• api가 어떤 걸 리턴할지 체크

Loading 처리

일부러 로딩 걸기

로딩 컴포넌트 만들어서 실행

이뮤터블 & 뮤터블

• 뮤터블(mutability)과 이뮤터블(immutability)은 데이터의 변경 가능성에 대한 개념
• 리액스에서 setState 함수를 사용하여 이전 상태를 변경하지 않고 새로운 상태를 생성하는 것이 이뮤터블한 상태 관리에 해당
• Redux : Immutable / MobX : Mutable (리덕스는 불변성을 유지하고 뮤터블한 상태 관리를 장려하는 반면, 몹엑스는 뮤터블한 상태 관리를 허용하며 자동화된 상태 추적을 제공하여 상태 관리를 더욱 간편하게 함)

MobX

MobX는 JavaScript 라이브러리로, 상태 관리를 위한 도구입니다. 특히 React 및 기타 프론트엔드 프레임워크와 함께 사용됩니다. MobX는 애플리케이션의 상태를 반응형으로 만들어주는 것에 중점을 둡니다. MobX는 관찰 가능한 상태(observable state)와 그 상태를 변화시키는 액션(action)을 사용하여 상태를 관리합니다. 그리고 상태의 변화에 따라 자동으로 UI를 업데이트할 수 있도록 합니다. MobX는 간단하고 직관적인 API를 제공하며, React 및 다른 프론트엔드 프레임워크와 함께 사용하기 쉽습니다. 상태 관리가 복잡한 애플리케이션에서 특히 유용하며, 상태 변화를 추적하고 UI를 업데이트하는 데 사용됩니다.

• Observable State (관찰 가능한 상태): MobX에서는 상태(state)를 관찰 가능한 상태로 만듭니다. 이러한 상태는 변화를 감지하고 상태가 변경될 때 자동으로 관련된 부분을 업데이트할 수 있습니다.
• Actions (액션): 액션은 상태를 변경하는 함수입니다. MobX에서는 상태를 직접 수정하는 것이 아니라 액션을 통해 상태를 변경합니다. 이를 통해 상태의 변화를 추적하고 관리할 수 있습니다.
• Reactions (반응): MobX는 상태가 변경될 때 자동으로 반응할 수 있는 방법을 제공합니다. 이를 통해 상태의 변화에 따라 UI를 업데이트하거나 다른 부수적인 작업을 수행할 수 있습니다.
• Computed Values (계산된 값): MobX는 계산된 값을 쉽게 만들 수 있습니다. 이는 상태의 변화에 의존하는 값을 자동으로 계산하여 제공합니다. Computed Properties.
• AutoRun

Observable

import { observable } from 'mobx';

// observable 상태 생성
const todoList = observable({
  todos: [],
  addTodo: function(todo) {
    this.todos.push(todo);
  },
  get todoCount() {
    return this.todos.length;
  }
});

// 상태를 변경하는 액션
todoList.addTodo('Learn MobX');

// 계산된 값 사용
console.log(todoList.todoCount); // 출력: 1

• observable 함수를 사용하여 todoList 객체를 observable 상태로 만듦

computed

import { makeAutoObservable, computed } from 'mobx';

class Rectangle {
  width = 0;
  height = 0;

  constructor(width, height) {
    this.width = width;
    this.height = height;
    makeAutoObservable(this); // 생성자 안에서 makeAutoObservable 호출
  }

  // 계산된 값 생성: 사각형의 면적
  get area() {
    return this.width * this.height;
  }

  // 액션: 사각형의 너비 업데이트
  updateWidth(newWidth) {
    this.width = newWidth;
  }

  // 액션: 사각형의 높이 업데이트
  updateHeight(newHeight) {
    this.height = newHeight;
  }
}

const rectangle = new Rectangle(5, 10);

console.log(rectangle.area); // 출력: 50

rectangle.updateWidth(8);

console.log(rectangle.area); // 출력: 80

• MobX의 computed를 사용하면 간단하게 계산된 값을 만들고 상태의 변화에 따라 자동으로 업데이트.

MakeAutoObservable, Reaction

import { makeAutoObservable, reaction } from 'mobx';

class User {
  name = 'John';
  age = 30;
  isAdult = false;

  constructor() {
    makeAutoObservable(this); // 생성자 안에서 makeAutoObservable 호출

    // reaction 설정: age가 변경될 때마다 isAdult를 업데이트
    reaction(
      () => this.age, // 관찰할 속성
      (newAge) => {
        this.isAdult = newAge >= 18;
      }
    );
  }

  // 액션
  updateName(newName) {
    this.name = newName;
  }

  // 액션
  updateAge(newAge) {
    this.age = newAge;
  }
}

const user = new User();

console.log(user.isAdult); // 출력: true

user.updateAge(15);

console.log(user.isAdult); // 출력: false

React - useContext

• (일부러 의도된 상태의 코드이긴 하지만) 지금은 말도 안되게 프롭스 보낼 때마다 일일이 인터페이스 설정해서 받고 하는 중이다.
  
• 그런데 리액트의 useContext를 쓰면, App에서 보낸 프롭스들을, 아무리 멀리 떨어진 자식 컴포넌트라 하더라도 쓰겠다고 하면 바로 쓸 수 있게 해 줄 수 있다.

MobX Setting

npm install

hello 출력