Edit

반응 분석하기 {🚀}

trace를 사용한 디버깅

trace는 computed 값, reaction, 컴포넌트 등이 왜 재계산되었는지 알려주는 조그만 유틸리티입니다.

사용법은 간단합니다. import { trace } from "mobx"로 임포트한 다음 reaction 이나 computed 값 안에 넣으면 됩니다. 이렇게 하면 해당 값이 왜 재계산되었는지 바로 출력이 됩니다.

마지막 인자로 true를 넘겨주면 자동으로 디버깅 모드에 진입할 수도 있습니다. 디버깅 모드에서는 해당 reaction 을 재실행하게 만든 변경사항을 스택 프레임을 통해 확인할 수 있습니다. 아래 이미지를 참고해주세요.

디버깅 모드에서는 reaction 과 computation 에 영향을 준 전체 파생 트리(derivation tree)도 볼 수 있습니다.

라이브 예시

CodeSandbox 에서 trace 를 사용한 간단한 예시를 확인해보세요.

여기에는 스택을 직접 둘러볼 수 있게 올려두었습니다. 크롬 디버거의 블랙박스 기능도 꼭 써보세요!

사용 예시

trace() 호출에는 총 3가지 방법이 있습니다. 먼저 아래와 같이 호출할 수 있습니다.

import { observer } from "mobx-react"
import { trace } from "mobx"

const MyComponent = observer(() => {
    trace(true) // observable 값이 이 컴포넌트를 재실행하게 할 때마다 디버깅 모드로 진입합니다.
    return <div>{this.props.user.name}</div>
})

둘째로, reaction 이나 autorun 의 reaction 인자를 통해 trace()를 호출할 수 있습니다.

mobx.autorun("logger", reaction => {
    reaction.trace()
    console.log(user.fullname)
})

마지막으로, computed 값 속성의 이름을 문자열로 넘겨줘도 됩니다.

trace(user, "fullname")

내부검사 API

아래 API 들은 디버깅을 위해 MobX 의 내부 상태를 검사하거나 MobX 를 활용해 멋진 툴을 만들 때 유용하게 쓸 수 있습니다. 다양한 isObservable* API 도 참고해보세요.

getDebugName

사용방법:

• getDebugName(thing, property?)

observable 객체나 프로퍼티, reaction 등에 대해 친절한 디버그 이름을 자동 생성해서 반환합니다. MobX 개발자 도구 에서도 사용되었습니다.

getDependencyTree

사용방법:

• getDependencyTree(thing, property?).

reaction 이나 computation 이 의존하고 있는 모든 observable 을 트리 형태로 반환합니다.

getObserverTree

사용방법:

• getObserverTree(thing, property?).

observable 을 사용하고 있는 모든 reaction 과 computation 을 트리 형태로 반환합니다.

getAtom

사용방법:

• getAtom(thing, property?).

observable 객체나 프로퍼티, reaction 등의 Atom 을 반환합니다.

Spy

사용방법:

• spy(listener)

MobX 의 모든 이벤트를 감시하는 전역 감시 리스너를 등록합니다. 이 작업은 모든 observable 에 observe 리스너를 붙이는 것과 거의 동일합니다. 여기에 추가로 실행 중인 트랜잭션, reaction, computation 에 대해 알려줍니다. 이것도 역시 MobX 개발자 도구 에서 사용되었습니다.

모든 액션에 대해 감시하는 예시:

spy(event => {
    if (event.type === "action") {
        console.log(`${event.name} with args: ${event.arguments}`)
    }
})

spy 리스너는 항상 하나의 객체를 받습니다. 이 객체엔 항상 type 필드가 있고 이 타입에 따라 서로 다른 필드를 갖게 됩니다. spy를 하면 기본적으로 아래 이벤트들이 감시됩니다.

타입	observable 유형	다른 필드들	중첩 여부
action		name, object (scope), arguments[]	예
scheduled-reaction		name	아니오
reaction		name	예
error		name, message, error	아니오
add,update,remove,delete,splice		가로채기 & 관찰 {🚀} 참고	예
report-end		spyReportEnd=true, time? (총 실행 시간(ms))	아니오

report-end 이벤트는 spyReportStart: true 이벤트와 한 쌍을 이룹니다. 이 이벤트가 묶음 이벤트의 마지막이란 것을 표시해줌으로써 서브 이벤트들을 포함하는 하나의 묶음 이벤트가 생성됩니다. 이 이벤트를 통해 전체 실행 시간을 보고 받을 수도 있습니다.

observable 값들에 대한 spy 이벤트들은 observe에 넘겨진 이벤트와 동일하게 취급됩니다. 프로덕션 빌드에서 spy API 는 무시되어 실행되지 않습니다.

가로채기 & 관찰 {🚀} 섹션에서 더 자세한 내용을 알아보세요.