<div id="readability-page-1" class="page"><div id="post-content" itemprop="articleBody">일 년 정도 리액트, 리덕스 조합으로 사용해 봤다.
뷰(vue)나 모빅스(mobx)에 비해 러닝커브가 있다고 했지만 반복하고 시간이 지나니 익숙해 지더라.
그러던 중 신규 프로젝트에 상태관리 라이브러리로 모빅스를 사용해 보자는 의견이 팀에서 나왔고 비교적 단순해 보였다.
사용해 본 결과, 역시 단순하다.
문서 기준으로 기본 개념을 정리해 보자.
<h2 id="기본-개념"><a href="#%EA%B8%B0%EB%B3%B8-%EA%B0%9C%EB%85%90" aria-label="기본 개념 permalink"></a>기본 개념</h2>
세 가지 용어가 등장한다.
<ul>
<li>상태(state)</li>
<li>데리베이션(derivation)</li>
<li>액션(action)</li>
</ul>
<h2 id="상태"><a href="#%EC%83%81%ED%83%9C" aria-label="상태 permalink"></a>상태</h2>
상태는 어플리케이션의 상태를 담고 있는 값이다.
예를 들어 타이머 경과 시간인 ts 정수나 동작 여부를 나타내는 불리언 값 따위가 될 수 있다.
<div data-language="js"><pre><code>// 상태
const state = observer({
 ts: 0, //
 isRunning: false,
})</code></pre></div>
<h2 id="데리베이션"><a href="#%EB%8D%B0%EB%A6%AC%EB%B2%A0%EC%9D%B4%EC%85%98" aria-label="데리베이션 permalink"></a>데리베이션</h2>
데리베이션은 상태의 변화에 반응하는 것을 말한다.
데이베이션을 번역하기가 마땅치 않아서 영어 단어 그대로 사용했는데 사전에 보면 "유도", "파생" 이라는 의미를 가진다.
상태의 변화에 따라 반응하는 것은 UI나 데이터 그리고 백엔드와의 연동이 있을 수 있겠다.
데리베이션은 두 가지로 분류할 수 있다.
<ul>
<li>계산된 값(computed values)</li>
<li>리액션(reactions)</li>
</ul>
계산된 값은 순수 함수를 사용하는데 가령 타이머 경과 시간이 지날때 마다 화면에 출력하기 위한 값이 반응하는 것이 계산된 값이다.
<div data-language="js"><pre><code>// 계산된 값
const elapsedTime = computed(() =&gt; {
 const sec = Math.floor(state.ts / 1000)
 const ms = Math.floor((state.ts % 1000) / 10)
 return `${sec}:${ms}`
})</code></pre></div>
순수 함수를 사용하는 계산된 값에 비해 리액션은 순수하지 않는, 즉 사이드 이펙트(side effiect)를 만든다.
타이머 시간이 경과할 때마다 화면에 출력할 값이 변경되고 이를 그리기 위해 돔(DOM)을 조작하는 행위다.
<div data-language="js"><pre><code>// 리액션
autorun(() =&gt; {
 document.querySelector("#timer").innerHTML = elapsedTime
})</code></pre></div>
<h2 id="액션"><a href="#%EC%95%A1%EC%85%98" aria-label="액션 permalink"></a>액션</h2>
데리베이션을 유도하기 위해서는 상태를 변경해야 하는데 이 역할을 하는 것을 액션이라고 한다.
상태를 변경하는 액션은 뭐 거창한 것이 아니라 단순히 상태에 값을 할당하는 행위다.
물론 엄격 모드(strict mode)에서는 action 에서만 상태를 변경하도록 강제하지만 실제 프로젝트할 때는 상태 변수에 값을 할당하는 것 만으로 잘 동작했다.
이것이 리덕스에 비해 모빅스의 장점이라고 생각한다.
<div data-language="js"><pre><code>function startTimer() {
 timerId = setInterval(() =&gt; {
 // 액션
 state.ts = state.ts + 10
 }, 10)
 // 액션
 state.isRunning = true
}</code></pre></div>
전체 코드를 죽 한 번 읽어 보자.
<div data-language="js"><pre><code>import { autorun, computed, observable } from "mobx"

// 상태
const state = observable({
 ts: 0,
 isRunning: false,
})

// 계산된 값
const elapsedTime = computed(() =&gt; {
 const sec = Math.floor(state.ts / 1000)
 const ms = Math.floor((state.ts % 1000) / 10)
 return `${sec}:${ms}`
})

let timerId = null

const $timer = document.querySelector("#timer")
const $button = document.querySelector("#button")

$button.addEventListener("click", () =&gt; {
 state.isRunning ? stopTimer() : startTimer()
})

function stopTimer() {
 if (timerId) clearInterval(timerId)
 // 액션
 state.isRunning = false
}

function startTimer() {
 timerId = setInterval(() =&gt; {
 // 액션
 state.ts = state.ts + 10
 }, 10)
 // 액션
 state.isRunning = true
}

// 리액션
autorun(() =&gt; {
 $timer.innerHTML = elapsedTime
})

// 리액션
autorun(() =&gt; {
 const btnTxt = state.isRunning ? "Stop" : "Start"
 $button.textContent = `${btnTxt}`
})</code></pre></div>
<h2 id="몇-가지-원칙"><a href="#%EB%AA%87-%EA%B0%80%EC%A7%80-%EC%9B%90%EC%B9%99" aria-label="몇 가지 원칙 permalink"></a>몇 가지 원칙</h2>
위에서 설명한 세가지 개념은 다음과 같은 순서로 동작한다.
<figure>
 
 <a href="/static/40fb3cb7f87c710a40b8ed23435e1a68/497e9/action-state-view.png" target="_blank" rel="noopener">
 
 <img alt="액션 - 스테이트 - 뷰 (출처: https://mobx.js.org/the-gist-of-mobx.html)" title="액션 - 스테이트 - 뷰 (출처: https://mobx.js.org/the-gist-of-mobx.html)" src="https://jeonghwan-kim.github.io/static/40fb3cb7f87c710a40b8ed23435e1a68/f8067/action-state-view.png" sizes="(max-width: 726px) 100vw, 726px" loading="lazy">
 </a>
 
 <figcaption>액션 - 스테이트 - 뷰 (출처: https://mobx.js.org/the-gist-of-mobx.html)</figcaption>
 </figure>
<ul>
<li>액션이 상태를 변경한다(타이머 값을 변경).</li>
<li>변경된 상태에 따라 이를 감시하고 있는 계산된 값이 반응한다(elapsedTime을 다시 계산).</li>
<li>경우에 따라서는 리액션이 발생하기도 한다(돔을 변경).</li>
</ul>
데리베이션은 몇 가지 특징이 있는데 그냥 참고 정도로 하면 좋겠다.
<h2 id="원자적-데리베이션"><a href="#%EC%9B%90%EC%9E%90%EC%A0%81-%EB%8D%B0%EB%A6%AC%EB%B2%A0%EC%9D%B4%EC%85%98" aria-label="원자적 데리베이션 permalink"></a>원자적 데리베이션</h2>
상태를 변경하는 채널은 여러개 일 수도 있다.
동시에 여러 채널에서 상태를 변경하려고 하면 데리베이션도 여러번 발생해서 렌더딩할 때 중간값이 노출 되지는 않을까?
하지만 그렇지 않다. Mobx는 값을 원자적으로 변경하기 때문에 여러번 요청이 오더라도 단 한 번만 반응하기 때문이다.
<blockquote>
All Derivations are updated automatically and atomically when the state changes. As a result it is never possible to observe intermediate values.
</blockquote>
리덕스 사가를 사용하면 takeLates() 같은 함수를 써서 여러번 요청이 올 때 마지막 한번만 잡는 방식을 썼는데 이걸 모빅스 기본으로 해 주는 것 같다.
<h2 id="동기적-데리베이션"><a href="#%EB%8F%99%EA%B8%B0%EC%A0%81-%EB%8D%B0%EB%A6%AC%EB%B2%A0%EC%9D%B4%EC%85%98" aria-label="동기적 데리베이션 permalink"></a>동기적 데리베이션</h2>
액션에서 상태를 변경하고 나서 곧장 상태값을 조회할 때 변경 완료된 값인지 보장할 수 있을까?
모든 데리베이션은 기본적으로 동기적으로 갱신된다. 따라서 상태를 변경하는 액션은 안전하게 변경된 값에 접근 할 수 있다.
<blockquote>
All Derivations are updated synchronously by default.
This means that, for example, actions can safely inspect a computed value directly after altering the state.
</blockquote>
<h2 id="계산된-값은-느리게"><a href="#%EA%B3%84%EC%82%B0%EB%90%9C-%EA%B0%92%EC%9D%80-%EB%8A%90%EB%A6%AC%EA%B2%8C" aria-label="계산된 값은 느리게 permalink"></a>계산된 값은 느리게</h2>
계산된 값은 느리게 갱신된다. 이게 무슨 의미 일까?
계산된 값은 모든 상태 변화에 반응하지는 않는다. 계산된 값이 사용되어야만 동작한다.
<blockquote>
Computed values are updated lazily.
Any computed value that is not actively in use will not be updated until it is needed for a side effect (I/O).
If a view is no longer in use it will be garbage collected automatically.
</blockquote>
<h2 id="리액트에서-사용하기"><a href="#%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%97%90%EC%84%9C-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0" aria-label="리액트에서 사용하기 permalink"></a>리액트에서 사용하기</h2>
이전 코드에서는 mobx 라이브러만 사용했다.
autorun() 함수로 리액션을 만들었는데 상태 변화에 따라 돔을 갱신하기 위해서다.
리액트 프로젝트에서 모빅스를 사용하려면 상태 변화에 따라 리액트 렌더 사이클을 돌려주어야 하는 역할잉 필요하다.
보통 리액트 컴포넌트는 프롭스 변화에 따라 렌더함수를 다시 실행한다.
리덕스를 사용할 때 connect() 함수의 역할이 이것이다.
모빅스도 리액트에서 사용하려면 이러한 역할이 필요한데 react-mox 패키지가 바로 그런 녀석이다.
리액트 컴포넌트가 모빅스 상태에 반응하도록 만들어 주는 HOC이다.
이전에 autorun() 으로 돔을 변경한 것 처럼 react-mox의 observer() 함수로 컴포넌트르 그렇게 만든다.
<div data-language="jsx"><pre><code>const App = () =&gt; &lt;Timer /&gt;

// 리액션
export default observer(App)</code></pre></div>
상태와 계산된 값 그리고 액션은 리액트와 무관하게 동일하게 사용한다.
전체 코드를 죽 한 번 읽어 보자.
<div data-language="jsx"><pre><code>import * as React from "react"
import { computed, observable } from "mobx"
import { observer } from "mobx-react"

// 상태
const state = observable({
 ts: 0,
 isRunning: false,
})

// 계산된 값
const elapsedTime = computed(() =&gt; {
 const sec = Math.floor(state.ts / 1000)
 const ms = Math.floor((state.ts % 1000) / 10)
 return `${sec}:${ms}`
})

let timerId: number | null = null

const App = () =&gt; {
 const handleClick = () =&gt; {
 if (state.isRunning) stopTimer()
 else startTimer()
 }

 const stopTimer = () =&gt; {
 if (timerId) clearInterval(timerId)
 // 액션
 state.isRunning = false
 }

 const startTimer = () =&gt; {
 timerId = setInterval(() =&gt; {
 // 액션
 state.ts = state.ts + 10
 }, 10)
 // 액션
 state.isRunning = true
 }

 return (
 &lt;&gt;
 &lt;div&gt;{elapsedTime.get()}&lt;/div&gt;
 &lt;button onClick={handleClick}&gt;
 {state.isRunning ? "Stop" : "Start"}
 &lt;/button&gt;
 &lt;/&gt;
 )
}

// 리액션
export default observer(App)</code></pre></div>
<h2 id="정리"><a href="#%EC%A0%95%EB%A6%AC" aria-label="정리 permalink"></a>정리</h2>
비교적 리덕스 보다는 단순한 것 처럼 보인다. 특히 액션을 관리가 그러한데, 액션 타입을 정의하고, 액션 생성자를 만들고, 리듀서가 액션 타입에 따라 상태를 조작하는 것이 좀 번거로웠다. 반면 모빅스는 자바스크립트 값을 할당하듯이 상태 변수에 직접 값을 지정하면 상태를 변경할 수 있다.
어떤 이는 모빅스를 두고 흑마법을 부린다고 표현했는데 내게는 백바법(?)처럼 다가왔다.
상태관리를 위한 코드가 눈에 띄게 줄어들었기 때문이다.
뿐만 아니라 거대한 단일 스토어를 만들 필요없이 필요에 따라 경량 스토어를 만들어 사용할 수 있어서 부담이 적었다.
6주 전에 이 글을 쓰려고 마음먹었는데 너무 오랜시간 방치하고 있었다.
마침내 모빅스 6.0 업데이트를 보고 부랴부랴 글을 발행한다.
참고
<ul>
<li><a href="https://codesandbox.io/s/post-mobx-timer-bqi7j?file=/src/index.js">post-mobx-timer 전체 코드</a></li>
<li><a href="https://codesandbox.io/s/post-mobx-timer-react-mx9fm?file=/src/App.tsx">post-mobx-timer-react 전체 코드</a></li>
</ul></div></div>

김정환 블로그 RSS Feed

김정환

일 년 정도 리액트, 리덕스 조합으로 사용해 봤다.
뷰(vue)나 모빅스(mobx…

상태관리 라이브러리 mobx

댓글