reactions

observer state에서 업데이트가 일어난 후 추가으로 발생하는 side effect이다. 이 reactions에는 대표적으로 앞전 포스트에서 다룬 autorun이 있다. 그 외에도 reaction과 when에 대해서도 살펴보자.

reaction

reaction은 autorun과 유사하지만 추적할 observable에 대해 보다 세밀하게 제어할 수 있다. reaction은 다음과 같이 두 개의 함수를 가진다. 첫 번째 data 함수는 트래킹 되어 두 번째 effect 함수에 대한 input으로 사용되는 데이터를 반환한다. reaction은 오직 data 함수에서 액세스 된 데이터에만 반응하며, 이는 effect 함수에 실제로 사용되는 데이터보다 적을 수 있다는 점에 유의해야 한다.

일반적인 패턴은 data 함수에서 reaction에 필요한 항목을 생성하여 effect가 트리거 되는 시점을 보다 정확하게 제어하는 것이다. 기본적으로 effect 함수가 트리거 되기 위해서는 data 함수의 결과가 변경되어야 한다. autorun과 달리 reaction는 초기화될 때 실행되지 않으며, 데이터 표현(expression)이 처음으로 새로운 값을 반환할 때에만 실행된다.

이를 통해 애플리케이션의 다양한 부분을 간단하게 연결하고 동기화시킬 수 있다. 기본 사용법은 아래와 같다.

reaction(
  () => value, 								// 관찰 대상 함수 (값)
  (value, previousValue, reaction) => { 	// 변화가 감지될 때 실행하는 콜백 함수
    sideEffect 
  }, 
  {
    // 옵션 (선택)
  	delay: 100, 							// 변화 감지 후 콜백 실행까지의 지연(ms)
    fireImmediately: true,					// 즉시 콜백 실행 여부
    name: 'myReaction', 				    // reaction의 이름 (디버깅 용도)
  }
).

when

특정 조건이 충족될 때까지 대기하다가 조건이 충족되면 지정된 작업을 수행하는 메커니즘이다. 주로 비동기 작업의 완료나 특정 상태의 도달을 감지하기 위해 사용된다.

when은 true를 반환할 때까지 주어진 predicate 함수를 관찰하고 실행한다. true가 반환되면 지정된 effect 함수를 실행하고 자동 실행기를 삭제한다.

when 함수는 disposer를 반환하므로 두 번째 effect 함수를 전달하지 않는 한 수동으로 취소할 수 있으며, 이 경우 Promise가 반환된다.

// 기본 방법
when(
  // 첫 번째 인자: 조건 함수
  () => boolean,
  
  // 두 번째 인자: 조건이 충족될 때 실행되는 콜백 함수
  () => {
    // 원하는 작업 수행
  },
  
  // 세 번째 인자 (옵션): 옵션 객체
  {
    timeout: 5000, 							// 대기 타임아웃(ms)
    name: 'myWhen', 						// when의 이름 (디버깅 용도)
  }
);

// Promise를 반환하는 방법
when(predicate: () => boolean, options?): Promise	

규칙

• observable이 변경될 경우 영향을 받는 reaction이 기본적으로 즉시 동기적으로 실행한다. 그러나 현재의 가장 바깥쪽 action이 완료되기 전까지는 실행되지 않는다. 이는 트랜잭션이 완료되기 전까지 여러 observable의 변경을 모아서 한꺼번에 처리하기 위한 메커니즘이다. 이렇게 함으로써 중복된 reaction 실행을 방지하고 성능을 최적화할 수 있다.

• autorun은 제공된 함수가 동기적으로 실행되는 동안 읽어지는 observable만을 트래킹 한다.
  비동기적으로 발생하는 것은 트래킹 하지 않는다.

• action은 트래킹 대상이 아니기 때문에, autorun은 autorun 내의 action에서 읽어지는 observable을 트래킹 하지 않는다. 이는 autorun과 action이 각각 다른 목적을 가지며, autorun이 특정 상태 변화를 감지하는 메커니즘이지만 action은 상태를 변경시키는데 사용되는 메커니즘이기 때문이다.

반응성 이해하기

mobx는 일반적으로 개발자가 기대하는 사항에 정확히 반응한다. 즉, 사용 사례의 90% 정도는 M
mobx가 "바로 작동"해야 한다. 그러나 어느 순간 예상했던 대로 되지 않는 경우가 발생할 수도 있다. 그 시점에서 MobX가 무엇에 반응할지를 어떻게 결정하는지 이해하는 것이 중요하다.

"MobX는 추적된 함수의 실행 과정에서 접근되는 기존의 observable 속성에만 반응한다."

다음은 mobx에서의 작동 흐름을 이해하기 위한 주요 단어이다.

• "Reading" 이란 점 표기법(예 : user.name) 또는 괄호 표기법(예 : user['name'], todos[3])을 통해 객체 속성을 역참조하는 것이다.

• "Tracked Functions" 이란 computed, observer인 react 함수 컴포넌트의 렌더링, class 기반 store class에 정의된 autorun, reaction, when의 첫 번째 파라미터로 전달되는 함수를 말한다.

• "During" 이란 함수가 실행되는 동안 읽히는 observable만이 추적됨을 의미한다. 해당 값이 추적된 함수에 의해 직접적으로 사용되는지 간접적으로 사용되는지는 중요하지 않다. 그러나 함수에서 '스폰(spawn)'된 항목은 추적되지 않는다. (예 : setTimeout, promise.then, await 등)

이로써, 상태 관리 라이브러리인 mobx를 react와 잘 사용하면, 컴포넌트에서 일어나는 상태의 관리를 효율적으로 유지보수할 수 있으며, 보다 단순하게 만들어주준다. 이에 따라 발생하는 컴포넌트의 UI 업데이트도 강력하게 작동하며 보다 획기적인 react 웹 애플리케이션을 만들 수 있을 것이다.