FLUX

Flux 패턴은 Facebook에서 개발한 React와 함께 사용되는 아키텍처 패턴이다. 등장 배경은 다음 문서에 잘 설명되어 있다. MVC 패턴으로 개발하던 페이스북이 알림 처리에서 한계를 느꼈다는 유명한 이야기..

단방향 데이터 흐름을 기반으로 하며, 다음과 같은 구성 요소를 가지고 있다.

Dispatcher

Flux 패턴에서 가장 중요한 역할을 하는 구성 요소.

액션을 전달하고, 액션을 처리할 콜백 함수를 등록하는 역할을 한다.

Store

애플리케이션의 상태를 저장한다.

또한 Dispatcher로부터 전달받은 액션을 처리하여 상태를 갱신하는 역할을 한다.

Action

Dispatcher로 전달되는 메시지로, 애플리케이션에서 발생하는 이벤트를 나타낸다.

View

사용자 인터페이스를 담당하는 컴포넌트로, 상태를 보여주고, 액션을 발생시키는 역할을 담당한다.

Flux 패턴의 데이터 흐름은 단방향으로, View에서 액션을 발생시키면 Dispatcher가 액션을 처리할 콜백 함수를 호출하고, 해당 액션을 처리하는 Store에서 상태를 갱신하게 된다. 이후 변경된 상태는 다시 View에 전달되어 화면을 갱신한다.

FLUX의 예시 코드는 다음과 같다.

const INCREMENT = 'INCREMENT';
const DECREMENT = 'DECREMENT';

function increment() {
  return {type: INCREMENT};
}

function decrement() {
  return {type: DECREMENT};
}

// Reducer
function counterReducer(state = {count: 0}, action) {
  switch (action.type) {
    case INCREMENT:
      return {count: state.count + 1};
    case DECREMENT:
      return {count: state.count - 1};
    default:
      return state;
  }
}

// Store
const store = Redux.createStore(counterReducer);

// View
const countElement = document.getElementById('count');
const incrementButton = document.getElementById('increment');
const decrementButton = document.getElementById('decrement');

function render() {
  countElement.textContent = store.getState().count;
}

store.subscribe(render);
incrementButton.addEventListener('click', () => {
  store.dispatch(increment());
});
decrementButton.addEventListener('click', () => {
  store.dispatch(decrement());
});

render();

Made with SlashPage