MobX
-
[2019.08.27] 오늘의 TIL - Next.js + TypeScript + Mobx 사용시 주의사항 [Provider, inject]개발 블로깅/Next.js 2019. 8. 27. 23:51
오늘 Next.js + TypeScript로 작업한 내용에 Mobx를 적용시켜서 새롭게 리펙토링을 하는 작업을 했다. Mobx를 적용하면서 부딪혔던 이슈 사항들을 정리해보려고 한다. # [Next.js + Mobx] 다른 pages로 렌더링 할 때 Next.js에서 최상위 컴포넌트는 pages디렉토리의 _app.js이므로, 해당 파일에 Provider를 적용시킨다. import App, { Container } from "next/app"; import React from "react"; import { Provider } from "mobx-react"; import RootStore from "../stores"; interface State { Store: RootStore; } export def..
-
[2019.08.26] Next.js + Mobx + TypeScript 사용 예시개발 블로깅/Next.js 2019. 8. 26. 19:24
기존에 있던 Next.js + typescript 프로젝트에서 Mobx를 적용시켜 리펙토링을 해야했다. next.js에 mobx를 올리려 하니까, 새롭게 알게된 소소한 부분이 있어서 블로깅으로 남기려고 한다. # Next.js에서 mobx의 Provider 적용 기존의 React에서 Provider를 적용하려면, 최상한 index.js에서 태그를 이용하여 를 감싸는 방식으로 사용했다. 그러나 next.js에서는 최상단이 Pages폴더가 되는데, 여러개의 페이지가 있어서 어디에 적용해야 될지 모를 수가 있다. 그러나 사실 Pages 폴더 내 파일 중 제일 최상위 파일인 _app.tsx(js)가 따로 있다. _app.tsx 파일을 아래와 같이 생성한다. pages/_app.tsx import App, { C..
-
[2019.08.14] Mobx State Tree(mst) 사용법개발 블로깅/React 개념 2019. 8. 14. 21:00
Mobx State Tree는 Mobx에서 조금 더 체계가 잡힌 패러다임....? Mobx의 type, action 등 구조의 자유도가 높았다면, mobx state tree는 관련된 것들끼리 tree 구조로 구성하도록 한다. (설명이 아직은 어렵다..) # mst를 사용하기 위한 환경 세팅 $ npx create-react-app $ yarn add mobx mobx-react mobx-state-tree # model 정의 model은 컴포넌트 내에서 사용되는 하나의 store이다. 해당 store 값을 조작하는 함수인 actions. store 변경으로 인해 자동으로 연상되는 (mobx의 computed와 같은)값 views. 위와 같이 하나의 store와 해당 store에 관련된 것들끼리 모여 하..
-
[2019.08.11] Mobx-react 기본 개념 및 사용법 2 (살짝 어려움 주의)개발 블로깅/React 개념 2019. 8. 12. 01:40
# Mobx-react 기본 개념 및 사용법 1 [2019.08.11] Mobx-react 기본 개념 및 사용법 1 (살짝 어려움 주의) Redux와 같이 global state 관리를 할 수 있는 mobx라는 라이브러리. Mobx는 Redux처럼 React에 종속되어 있는 라이브러리가 아니므로, 꼭 React가 아닌 일반 javascript 내에서 또는 vue.js와 같은 다른 웹 프레.. helloinyong.tistory.com 앞에서 구현한 Counter 컴포넌트를 이용하여 Mobx에 대해 더 알아보도록 하자. # observable 값 변경에 의한 연산 처리 computed Counter 값을 변경할 때마다, 자동으로 제곱된 값이 나오도록 해보자. src/Counter.js import Reac..
-
[2019.08.11] Mobx-React 개념 및 사용법 1 (살짝 어려움 주의)개발 블로깅/React 개념 2019. 8. 11. 22:00
글로벌 상태 관리를 할 수 있는 MobX 개념 및 사용법에 대해 정리한다. 먼저 MobX는 리덕스와 같이 리액트에 종속되어 있는 라이브러리가 아니다. React가 아닌 일반 javascript 내에서 또는 Vue.js와 같은 다른 웹 프레임워크에서도 사용할 수 있는 점을 참고하자. MobX 개념 파악하기 - Observable (관찰받고 있는 state) 리액트 안에서 사용되는 글로벌 상태를 직접 변경하며 어떻게 상태가 변했는지 파악하는 요소. - Computed Value (연산된 값) 이벤트 발생으로 인해 어떠한 연산에 필요로 하는 state에 변화가 생겼을 때, 그 state 변화에 따라서 새로운 연산 작업을 수행하게 된다. 해당 state에 변화가 없으면, 그냥 기존의 값을 사용한다. - Acti..