xstate에서 작업이 실행될 때

const machine = Machine(
  {
    initial: 'idle',
    context: {
      winning: 'heads',
      selected: 'tails'
    },
    states: {
      idle: {
        on: {
          SELECT: [
            { target: 'playing' }
          ]
        },
      },
      playing: {
        // It might seem that entry level action fires first.
        entry: ['flipCoin'],
        on: {
          '': [
            // And *after* that the guard is checked.
            // But this is not how it works.
            { target: 'score', cond: 'isScore' },
            { target: 'nope' }
          ]
        }
      },
      nope: {
        type: 'final'
      },
      score: {
        type: 'final'
      },
    }
  }, {
    guards: {
      isScore(context) {
        console.log('guard isScore');
        return context.selected === context.winning;
      },
    },
    actions: {
      flipCoin(context) {
        context.selected = 'heads';
        console.log('action flipCoin');
      }
    }
  }
);

Actions are not immediately triggered. Instead, the State object returned from machine.transition(...) will declaratively provide an array of .actions that an interpreter can then execute.

After event is sent to xstate, the next state of the statechart is determined based on current context before any actions are fired.