# mobx

34개의 포스트
post-thumbnail

React 상태 관리 Tool 사용 & 비교 - (Redux VS MobX VS Context API)

1. Context API https://ko.reactjs.org/docs/context.html#when-to-use-context https://www.youtube.com/watch?v=5LrDIWkK_Bc context는 React 컴포넌트 트리

2021년 4월 1일
·
0개의 댓글

MobX에서 observable, action 만들기

MobX는 구조를 만드는 방법이 하나만 존재하는 것이 아니라, 여러 방법을 제시하고 있다. 여기서는 observable, action을 만드는 여러 방법에 대해 알아볼 것이다.Observable은 makeObservable 을 사용하여 observable이라고 표기해야

2021년 3월 2일
·
0개의 댓글

MobX 코어 개념

MobX에 대해 공부하며, 공식문서의 README와, The gist of MobX를 읽으며 내가 이해한대로 정리한 글이다. 그래서 틀릴 수 있다...😢MobX는 action으로 state가 바뀌었을 때, 단방향 으로 데이터가 흐르게 된다. 그 결과 영향을 받는 뷰

2021년 3월 1일
·
0개의 댓글
post-thumbnail

React 상태 관리

React 와 같은 SPA 를 개발할 때, 많은 컴포넌트의 페이지가 생성된다면, 컴포넌트 사이에 데이터 및 메소드의 접근이 매우 복잡해지는 경우가 발생할 수 있습니다.작성하는 입장에서는 물론이고 가독성 면에서도 상당히 떨어지기 때문에, 이를 Global Store 영역

2021년 2월 7일
·
0개의 댓글

MobX 톺아보기 🧐

obsevables을 기반으로 계산된 값, 정보를 뜻한다. Lazily 하게 evaluate 하는데 obsevables 가 변경되었을때만 계산을 진행한다. Computed Value는 getter 로 지정해서 표현할 수 있다. Example)➡️ 예시와 같이 get을

2021년 1월 25일
·
0개의 댓글
post-thumbnail

MobX 공식 문서 톺아보기

➡️ MobX는 3가지 개념으로 나눌 수 있다. State Actions - state를 변화 시키는 것Derivations(Computed Values) - state로 부터 계산된 값imgobservable 을 지정함으로써 값의 변화를 감지할 수 있다. makeOb

2021년 1월 21일
·
0개의 댓글
post-thumbnail

MobX 시작해보기

오늘은 상태관리 라이브러리 중 하나인 Mobx에 대해서 알아보겠습니다.MobX의 기본 개념에 대해서 살펴보고 리액트 프로젝트에서 어떻게 사용되는지를 알아보겠습니다.➡️ MobX에서 state(상태, 값)를 관찰 대상(observable value)라고 합니다.이 객체에

2021년 1월 17일
·
2개의 댓글
post-thumbnail

🧐 상태 관리 뭐로 할까? Redux, Context API, MobX (영문)

In layman's terms, global state management allows data to be passed/manipulated among multiple components easily (breaking the chain of passing-props-

2020년 12월 29일
·
1개의 댓글
post-thumbnail

Mobx 일단 혼내보기 (1)

Mobx로 프로젝트를 시작해야 한다. Mobx가 뭔지도 아직 모르겠지만 일단 혼내보자.출처 : 우아한형제들 기술블로그Mobx의 데코레이터를 사용하기 위해서는 CRA가 지원이 안돼서 따로 설정을 해줘야 한다.참고 : https://velog.io/@hadmari

2020년 12월 15일
·
0개의 댓글
post-thumbnail

[Mobx] 리액트 Context API + Mobx

Mobx 공식 docs를 보면 리액트와 결합하는 방법은 총 세가지입니다. mobx store를 컴포넌트의 props로 넘긴다.import해서 전역 객체로 사용한다.React의 context API를 활용한다.이 중에 3번째 방법이 공식 문서에서 추천하는 best pra

2020년 12월 8일
·
0개의 댓글
post-thumbnail

Mobx(2) - React에서 사용하기

현제 프로젝트에서 Mobx를 사용하고자 합니다. 그래서 React에 Mobx 간략히 사용해보겠습니다.React에서 Redux가 아닌 Mobx를 사용하여 상태 관리를 해보겠습니다. 우선 해당 글에 나오는 코드는 벨로퍼트 님의 글에서 옵니다. MobX (2) 리액트 프로젝

2020년 11월 29일
·
0개의 댓글

TIL 45 day MobX store의 값을 re-rendering 하는 방법

next.js와 MobX 및 hooks를 사용한 프로젝트에서 헤맨 과정의 일부이다. MobX가 Redux와 같은 상태관리 라이브러리라는 사실은 알고 시작했지만 hooks로 사용하려니 너무 자료가 없었다. 대부분의 90% 이상의 예제들이 모두 class component

2020년 11월 28일
·
0개의 댓글
post-thumbnail

Mobx(1)

상태관리 라이브러리 중 Mobx 대하여...

2020년 11월 23일
·
0개의 댓글
post-thumbnail

[ MobX ]

Observable State (관찰 받고 있는 상태) MobX를 사용하고 있는 앱의 상태는 Observable(관찰받고 있는 상태)이다. 앱에서 사용하고 있는 상태는 변할 수 있으며, 만약에 특정 부분이 바뀌면 MobX에서는 어떤 부분이 바뀌었는지 정확히 알 수 있다

2020년 11월 22일
·
0개의 댓글
post-thumbnail

Mobx로 간단한 입력노트 만들어보기

Mobx란 무엇인가? Redux와 같은 State관리 라이브러리의 일종이다. 기본적으로 객체 지향적인 성격을 띄며, Component와 State를 연결하는 보일러플레이트 코드들을 데코레이터(애노테이션)제공으로 깔끔하게 해결한다. cf) 보일러 플레이트란? 변경없이

2020년 11월 22일
·
0개의 댓글
post-thumbnail

TIL 77 | MobX + React Hooks + TypeScript

MobX와 React Hooks를 조합하기 위해서는 mobx-react-lite를 사용하게 된다. 하지만 기존의 MobX와는 약간의 차이가 있어 직접 구현해야 하는 부분들이 존재한다. 초기

2020년 11월 8일
·
0개의 댓글
post-thumbnail

TIL 76 | MobX Basics

MobX는 리덕스와 같이 인기있는 리액트 상태 관리 라이브러리다.

2020년 11월 2일
·
0개의 댓글
post-thumbnail

우아한 테크러닝 3기 React & TypeScript 1회차

우아한 테크러닝 강의 1회차 (2020.09.01) typescript 타입명시 타입 알리어스 타입명을 개발자가 원하는 이름으로 설정할 수 있음. 컴파일 타임에만 작동하는 것과 런타임에 작동하는 것이 따로 있음. 객체 타입도 만들 수 있음 타입 알리아스와 인

2020년 9월 14일
·
0개의 댓글

MobX : Hooks와 함께 사용하기

✔️ 여기서는 MobX를 클래스형이 아닌 함수형 컴포넌트에서 Hooks, 그리고 Context API와 함께 사용하는 방법을 정리한다. 먼저 MobX와 함께 사용될 Context API에 대하여 알아보도록 하자. Context 주로 어플리케이션으로 전역적으로 데이

2020년 8월 31일
·
1개의 댓글

MobX

MobX 란 무엇인가 state를 전역적으로 쉽게 관리할 수 있게 해주는 라이브러리 (Redux와 유사) MobX의 흐름을 전반적으로 보여주는 그림으로 필수로 알아야 할 개념은 observer / @action / @observable / @computed 이다.

2020년 8월 23일
·
0개의 댓글