global에서 component에 직접 setState하는 상태관리는 성능이 떨어질까요?


(Sang Yun Pae) #1
//global.js
class GlobalState{
  constructor(){
    this.foo = true;
    this.observers = [];
  }

  _mutateFoo(foo){
    this.foo = foo;
    for(let component of this.observers){
        component.setState({foo: this.foo});
    }
  }

  actionFoo(foo){
    this._mutateFoo(foo);
  }

  subscribeState(component){
    this.observers.push(component);
    component.setState({
       foo: this.foo
   });
  }

  unsubscribeState(component){
    for(let i in this.observers){
        if(this.observers[i] === component){
            this.observers.splice(i,1);
            break;
        }
    }
  }
}

//screen_foo.js
import global from './global'

class FooScreen extends Component{
  constructor(){
    this.state = {
      foo: false,
    };
  }

  componentDidMount(){
    global.subscribeState(this);
  }
  
  componentWillUnmount(){
    global.unsubscribeState(this);
  }

  onBar() {
    global.actionFoo(true);
  }
}

React Native로 앱을 개발중입니다.
Redux를 도입하기에는 전역에서 관리하는 상태가 많지 않은데 간단한 변수 몇개들은 전역에서 동적으로 관리해줘야해서, Vuex스럽게(?) 만들어보았습니다.
근데 아무리 찾아봐도 React Native에서 저런 패턴으로 구현한 글을 찾아보기 힘들어서, 혹시 이런 구현 방식이 안티패턴인가 해서 여쭤봅니다. 성능 상 불이익도 있을 것 같기도 하구요…

관련된 검색어라도 추천해주시면 감사하겠습니다! ㅎㅎ


(Sang Yun Pae) #2

이종은님의 componentDidMount에서 setState를 쓰지 말아야 하는 이유 글이 유사한 주제로 떠서 읽어보았습니다. componentDidMount에서 subscribeState를 호출하면서 setState가 일어나기때문에 성능 저하가 일어날 수 있겠네요.