Redux

SPA를 개발하다 보면 데이터 관리가 정말 힘듭니다.

 

아주 오래전, Jquery만을 이용해서 Hash Router SPA를 만든 적이 있었습니다.

 

한 페이지를 만드는 일이야 간단했지만, 페이지간 데이터를 공유하고 이를 관리하는 일은 절대 만만한 일이 아니었습니다.

 

이를 해결하기 위해 글로벌 객체인

 

 var DATA = {} 

 

를 선언하고 여기에 SPA에서 사용하는 데이터들을 몽땅 넣었죠.

 

그리고 Get, Set 함수를 이용해 데이터를 관리했습니다.

 

var DATA = (function() {
  var data = {};
  return {
    set: function(k, v) {
      if (data[k]) {
        console.log('데이터를 덮어씁니다.');
      }
      data[k] = v;
    },
    get: function(k) {
      return data[k];
    },
    all: function() {
      return JSON.parse(JSON.stringify(data));
    },
  };
})();

 

이것은 꽤나 훌륭한 방법이었습니다.

 

A페이지에서 어떤 리스트 데이터가 로드되었다면 B페이지에서도 해당 리스트를 여전히 사용할 수 있었습니다.

 

하지만 페이지가 많아지고 데이터가 복잡해질수록 곧 엄청나게 헷갈리기 시작합니다.

 

직접 SPA를 개발해 보신분은 아실 겁니다. 

 

고통받는 기분을.. ㅠㅜ 무언가 잘못되어간다는 기분이 개발을 할수록 계속 듭니다.

 

또한 MVC 패턴에서는 View와 Model이 N:N의 관계로 정의되기 일수입니다.

 

이러한 상황에서 서로가 서로를 변경하게 될 때 스케일이 조금만 커져도 예측 불가능한 방향으로 데이터의 변화가 이루어지게 됩니다.

 

이러한 문제를 우리는 스토어 혹은 저장소라는 개념으로 해결할 수 있습니다.

 

페이스북에서 발표한 Flux 아키텍쳐죠.

 

Flux 패턴 속에서 데이터의 흐름은 단순해집니다.