React + Redux에서 장기 실행 프로세스 관리하기

제목: React + Redux 애플리케이션에서 장기 실행 프로세스는 어디에 위치해야 할까요?

React + Redux 애플리케이션에서 장기 실행 프로세스를 관리하는 적절한 위치를 결정하는 것은 도전적일 수 있습니다. 다양한 접근 방식이 있지만 상태 관리, 테스트 가능성, 핫 리로딩과 같은 요소를 고려하는 것이 중요합니다. 이 블로그 글에서는 React + Redux 앱에서 장기 실행 프로세스를 다루는 다양한 전략을 탐색해 보겠습니다.

옵션 1: 스토어 전달

한 가지 방법은 스토어를 리덕스 이외의 코드에 전달하고 거기에서 액션을 디스패치하는 것입니다. 이는 프로세스가 리덕스 스토어와 상호 작용해야 하지만 직접 디스패치 함수에 대한 액세스가 필요하지 않을 때 유용할 수 있습니다. 예를 들어, 소켓 연결이 필요한 경우 스토어를 연결 객체에 전달하고 필요할 때마다 액션을 디스패치할 수 있습니다:

class WebsocketStreamer {
  constructor(store) {
    this.store = store;
    this.socket = new WebSocket();
    // ...  
  }

  sendMessage(message) {
    this.socket.send(message);
  }

  onMessageReceive(event) {
    this.store.dispatch({
        type: "STREAMER_RECV",
        message: event.data,
    });
  }
}

// 사용 예시:
const streamer = new WebsocketStreamer(store);

옵션 2: 커스텀 미들웨어

장기 실행 프로세스가 리덕스 액션에 반응하고 디스패치 함수에 액세스해야 하는 경우, 커스텀 미들웨어를 사용하는 것이 적절한 해결책일 수 있습니다. 이를 통해 액션을 가로채고 리듀서에 도달하기 전에 추가 로직을 수행할 수 있습니다. 아래는 장기 실행 프로세스를 관리하기 위한 미들웨어 구현 예시입니다:

const longRunningProcessMiddleware = store => next => action => {
  if (action.type === "SOME_ACTION") {
    // 여기에서 장기 실행 프로세스 수행
  }
  return next(action);
};

// 사용 예시:
const store = createStore(reducer, applyMiddleware(longRunningProcessMiddleware));

옵션 3: 별도의 컴포넌트

다른 접근 방식은 장기 실행 프로세스를 캡슐화하기 위해 별도의 React 컴포넌트를 생성하는 것입니다. 이 컴포넌트는 애플리케이션의 루트 부근에 렌더링되고 필요한 모든 로직을 내부적으로 처리할 수 있습니다. 아래는 예시입니다:

class WebSocketClientThingy extends React.Component {
  componentDidMount() {
    // 여기에서 장기 실행 프로세스 초기화 및 관리
  }
  
  componentWillUnmount() {
    // 컴포넌트 해제 시 프로세스 정리
  }
  
  render() {
    return null;
  }
}

// 사용 예시:
ReactDOM.render(
  <App>
    <WebSocketClientThingy />
    ...
  </App>,
  document.getElementById('root')
);

애플리케이션의 루트 부근에 컴포넌트를 렌더링함으로써 해당 컴포넌트가 앱의 라이프사이클 동안 활성 상태를 유지할 수 있도록 합니다.

결론

React + Redux 애플리케이션에서 장기 실행 프로세스를 관리하기 위해 여러 가지 유효한 옵션이 있습니다. 스토어 전달, 커스텀 미들웨어 사용, 별도의 컴포넌트 생성 등 각 접근 방식은 상태 관리, 테스트 가능성, 핫 리로딩과 같은 요소를 고려해 선택해야 합니다. 각 접근 방식마다 장단점이 있으므로 구체적인 사용 사례에 가장 적합한 방법을 선택하십시오.

기억해야 할 점은 리덕스 디자인 패턴의 무결성을 유지하는 동시에 장기 실행 프로세스의 요구 사항을 수용하는 균형을 잡는 것입니다.

참고 자료 : 

reactjs