mobx3 Mobx를 store로 분리하여 사용 하기(3) 개요 Mobx로 상태를 관리할때, Store로 분리하여 사용하는 방법에 대하여 알아 보자. 기존에, 한 파일 안에 그에 해당하는 Mobx를 작성하는 것이아니라, Store로 분리하면, 더욱더 효율적으로 상태를 관리할 수 있다. 또한, Mobx는 Redux와 달리 스토어를 여러개 만들 수 있으며, 기능별, 로직별로 원하는 대로 store를 분리하여 깔끔하게 비지니스 로직을 작성할 수 있다. Store 분리하기 먼저 src 폴더안에 stores라는 폴더를 만든 후, counterStore.js를 만들고 다음과 같이 코드를 작성해보자. 코드는 지난 포스트에서의 Counter 기능에 대한 내용을 이어서 작성하겠다. src/stores/counterStore.js import { makeObservable, ob.. 2022. 1. 25. Mobx를 적용하여 상태 관리하기 (2) 개요 지난 포스트를 이어, 리액트에서 Mobx를 어떻게 설정하고 적용하는지에 대해 알아보자. Mobx 설치 먼저, 리액트에서 상태 관리 라이브러리인 Mobx를 적용하기 위해서 설치를 해주셔야 한다. 다음과 같이 설치를 진행해보자. npm install mobx mobx-react 설치가 완료 되었다면, Counter 파일을 만들어 보자. Mobx를 활용한 예제코드는 다음과 같다. src/components/Counter import React from "react"; import { makeObservable, observable, action } from "mobx"; // 추가 import { observer } from "mobx-react"; //추가 class Counter extends Rea.. 2022. 1. 24. Mobx에 대한 주요 개념에 대해 알아보기 (1) 개요 전역 상태 관리를 할 수 있는 Mobx의 대한 개념 및 소개에 대해 알아보겠다. React에서 전역 상태 관리 라이브러리를 생각하면 가장 먼저 또오르는 것이 Redux 이다. 그다음에 Mobx라는 라이브러리가 사용 된다고 생각한다. Mobx는 Redux와 비교하면 러닝커브가 낮은편으로, 초심자가 이해하기 더욱 쉽고 금방 적응 하실 수 있다. 또한, Mobx는 Redux와 같이 리액트에 종속되어 있는 라이브러리가 아니고, React 뿐만 아니라 Vue.js와 같은 웹 라이브러리에 적용 할 수 있다. Mobx란 무엇인가? Mobx는 전역 상태 관리 라이브러리 이다. 모든 상태 변화가 일어나는 부분을 자동으로 추적해 주는 역할을 한다. 그렇다면 상태관리는 왜 필요할까? 프로젝트 규모가 작을때는, 부모와 .. 2022. 1. 22. 이전 1 다음
