✍️
TIL
  • TIL
  • react
    • react 16.3 이후 라이프 싸이클
    • 함수형 컴포넌트 vs 클래스 컴포넌트
    • React의 장점
    • 기본문법
    • Flow Diagram
    • redux-saga
    • nextjs
    • mobx
    • 리액트는 어떻게 동작할까?
  • data-structure
    • 이진 검색 트리(binary search tree)
    • HashTable
    • Tree
    • 트라이(Trie)
    • 선형 구조 vs 비선형 구조
    • 연결 리스트(linked-list)
    • Queue
    • Graph
    • Heap
    • Stack
  • web
    • 웹 브라우저의 동작 원리
    • Basic
    • Webpack이란?
    • rendering
    • npm
    • babel
  • graphQL
    • Query
    • Mutation
    • Introduction
  • algorithm
    • big-o
    • 버블 정렬(bubble sort)
    • 힙 정렬(heap sort)
    • 선택 정렬(selection sort)
    • 퀵 정렬(quick sort)
    • 백트래킹 알고리즘
    • 삽입 정렬(insertion sort)
    • 계수 정렬(counting sort)
    • 다엑스트라 알고리즘
    • 이진 탐색
    • 합병 정렬(merge-sort)
    • 동적 계획법(Dynamic programming)
  • web-security
    • XSS(Cross Site Scripting)
    • CSRF(Cross-site request forgery)
    • Tabnabbing
  • javaScript
    • dom
    • 자바스크립트 성능 최적화
    • Event Loop
    • Snippets
    • javaScript
  • programming-paradigm
    • Object Oriented Programming
    • 함수형 프로그래밍
    • 구조적 프로그래밍
  • computer-science
    • Process vs Thread
    • 비트 연산자
    • 그레이 코드
  • vue
    • Vue
  • design-pattern
    • MVP pattern
    • Flux
    • 아토믹 디자인
    • MVVM pattern
    • MVC pattern
  • css
    • css
    • Grid
    • css-methodologies
    • FlexBox
  • html
    • html
  • regExp
    • regExp
  • git
    • Git-flow
Powered by GitBook
On this page
  • mobx Basices
  • observable
  • computed
  • action
  • mobx-react Basices
  • observer
  • inject
  • typescript props type error 해결방법

Was this helpful?

  1. react

mobx

mobx Basices

observable

  • 넘겨받은 객체나 값 등을 observe(관찰)하게 만듦

class CounterState {
  @observable
  number = 0
}

computed

  • 연산된 값을 사용해야 할 때 사용

  • 값이 바뀔 때 미리 값을 계산해놓고 조회 할 때는 캐싱된 데이터를 사용함

class MarketStore {
  @observable
  selectedItems = []

  @computed
  get totalPrice() {
    // 총합 계산
    return this.selectedItems.reduce((previous, { price }) => {
      return previous + price
    }, 0)
  }
}

action

Observable State를 변경할때 사용

class CounterState {
  @observable
  number = 0

  @action
  increase = () => {
    this.number++
  }

  @action
  decrease = () => {
    this.number--
  }
}

mobx-react Basices

observer

  • observable state 를 추적 할때 사용

  • 만일 observable state를 사용하는데 observer로 매핑 하지않으면 observable state가 변경될시 rerendering이 안일어남

@inject("userStore")
@observer
class MyComponent extends React.Component<IProps, {}> {
  get injected() {
    return this.props as InjectedProps;
  }

  render() {
    const { userStore, router } = this.injected;
    ...
  }
}

inject

mobx state를 props로 주입 할때 사용 함수형태로 파라미터를 전달해주면 특정 값만 주입도 가능

// example store을 props에 주입
@inject('example')

//함수형태
// foo, bar를 props에 주입
@inject(stores => ({
  foo: stores.example.foo,
  bar: stores.example.bar
}))

typescript props type error 해결방법

@inject("userStore")
@withRouter
@observer
class MyComponent extends React.Component<IProps, {}> {
  get injected() {
    return this.props as InjectedProps;
  }

  render() {
    const { name, countryCode } = this.props;
    const { userStore, router } = this.injected;

  }
}
PreviousnextjsNext리액트는 어떻게 동작할까?

Last updated 5 years ago

Was this helpful?

또는 위 링크 처럼 하는 방법도 있음

참고

https://github.com/mobxjs/mobx-react#strongly-typing-inject
https://github.com/mobxjs/mobx-react/issues/256