React Router

• BrouserRouter
• Route
• Link
• NavLink
• Redirect

React Router Hooks

• useHistory
• useLocation
• useParams
• useRoutMatch

중간체크

• MobX 나오는 구간부터 미친듯이 정신없이 캐치업하느라 이론을 하나하나 체크하면서 가는 걸 포기하긴 했는데 그래도 지금이라도 일단 일단 체크.
• 기본적으로 알아야 하는 것은, 자바스크립트로 프론트엔드를 구현할 때 변수를 관리하는 것이 백엔드보다 어려울 수 있다는 것이다. 이유는 데이터베이스에 연결되지 않은 상태이기 때문에. 그렇기 때문에 그 변수들을, 상태를 보다 더 잘 관리할 수 있게 도와주는 라이브러리가 필요하다.
• 그러할 때, 우리는 필요에 따라 Redux를 쓰든지 MobX를 쓰는 것이다. 이번에는 MobX를 쓰기로 한 것이고.

MobX의 흐름

• 상태정의 : 먼저 상태를 정의하고, MobX에서 관리하고자 하는 상태를 클래스나 객체로 선언. 이 상태는 MobX가 추적하고 관리할 데이터를 포함.

import { makeAutoObservable } from 'mobx';

class CounterStore {
  count = 0;

  constructor() {
    makeAutoObservable(this);
  }
}

const counterStore = new CounterStore();

• 상태 관찰자 설정: MobX는 상태를 관찰하고 상태가 변경될 때마다 알림을 받을 수 있는 관찰자를 설정. 이를 위해 makeObservable 또는 makeAutoObservable를 사용하여 상태 클래스를 MobX의 관찰 가능 클래스로 만듦.

import { makeAutoObservable } from 'mobx';

class CounterStore {
  count = 0;

  constructor() {
    makeAutoObservable(this);
  }
}

const counterStore = new CounterStore();

// CounterStore 클래스를 관찰 가능하게 만들었으므로, 이제 이 상태를 관찰할 수 있음.

• 액션 정의: 상태를 변경하는 메서드를 액션으로 정의. 액션은 상태 변경에 대한 모든 작업을 캡슐화하고, MobX에게 상태 변경이 발생했음을 알리는 역할을 수행. 보통은 runInAction 함수를 사용하여 상태 변경을 알림.

import { makeAutoObservable, runInAction } from 'mobx';

class CounterStore {
  count = 0;

  constructor() {
    makeAutoObservable(this);
  }

  increment() {
    runInAction(() => {
      this.count++;
    });
  }
}

const counterStore = new CounterStore();

• 상태 변경: 상태를 변경하는 작업을 수행. 이 작업은 액션으로 정의된 메서드를 호출하여 수행.

import { makeAutoObservable, runInAction } from 'mobx';

class CounterStore {
  count = 0;

  constructor() {
    makeAutoObservable(this);
  }

  increment() {
    runInAction(() => {
      this.count++;
    });
  }
}

const counterStore = new CounterStore();

// 상태 변경을 호출하는 예시
counterStore.increment();

• 상태 반응: 상태가 변경되면 MobX는 관찰자에게 상태 변경을 알림. 이에 따라 관찰자(예: React 컴포넌트)가 상태의 변경을 감지하고 필요한 대로 렌더링을 업데이트.

import { makeAutoObservable, runInAction } from 'mobx';
import { observer } from 'mobx-react-lite';

class CounterStore {
  count = 0;

  constructor() {
    makeAutoObservable(this);
  }

  increment() {
    runInAction(() => {
      this.count++;
    });
  }
}

const counterStore = new CounterStore();

// React 컴포넌트에서 MobX 관찰자로 상태 반응
const CounterComponent = observer(() => {
  return (
    <div>
      <p>Count: {counterStore.count}</p>
      <button onClick={counterStore.increment}>Increment</button>
    </div>
  );
});