Colin's Blog
MobX를 활용한 리액트 서버 렌더링 방법

이 블로그 포스트에서는 MobX를 사용하여 리액트 애플리케이션을 서버에서 렌더링하는 방법에 대해 알아보겠습니다.

MobX 소개

MobX는 상태 관리 라이브러리로, 어플리케이션 상태를 관리하고 업데이트하는 데 사용됩니다. MobX는 간단하고 직관적인 API를 제공하며, 리액트와 함께 사용하기에 이상적입니다.

서버 렌더링이란?

서버 렌더링은 서버 측에서 리액트 컴포넌트를 렌더링하는 것을 의미합니다. 이를 통해 초기 페이지 로딩 시간을 단축하고, 검색 엔진 최적화(SEO)를 향상시킬 수 있습니다.

MobX와 함께 서버 렌더링하기

  1. MobX 상태 관리 설정: MobX를 사용하기 위해 애플리케이션의 상태를 관리하는 스토어를 생성하고, 필요한 액션과 관찰 가능한 값을 정의합니다. 이를 위해 MobX의 observable, action, computed 등의 데코레이터를 사용할 수 있습니다.

    예시 코드:

     import { observable, action, computed } from 'mobx';

 class CounterStore {
   @observable count = 0;

   @action increment() {
     this.count += 1;
   }

   @action decrement() {
     this.count -= 1;
   }

   @computed get doubledCount() {
     return this.count * 2;
   }
 }

 const counterStore = new CounterStore();

  2. 서버 측 컴포넌트 생성: 서버에서 컴포넌트를 렌더링하기 위해 리액트 컴포넌트를 서버 측에서 생성합니다. 이 단계에서 MobX 스토어를 제공하여 컴포넌트가 올바른 상태를 가져올 수 있도록 해야 합니다. 이를 위해 Provider 컴포넌트를 사용하고, static 메서드인 prepareStore를 구현하여 서버 렌더링 전에 MobX 스토어의 초기화를 처리할 수 있습니다.

    예시 코드:

     import React from 'react';
 import { renderToString } from 'react-dom/server';
 import { Provider } from 'mobx-react';
 import counterStore from './stores/counterStore';
 import App from './App';

 function prepareStore() {
   // MobX 스토어 초기화
   counterStore.count = 10;
 }

 function renderApp() {
   return renderToString(
     <Provider counterStore={counterStore}>
       <App />
     </Provider>
   );
 }

 export { prepareStore, renderApp };

  3. 서버에서 렌더링 실행: 서버에서 MobX 스토어를 초기화한 후, renderApp 함수를 호출하여 리액트 애플리케이션을 렌더링합니다. 이를 통해 서버에서 초기 상태가 적용된 렌더링된 HTML을 생성할 수 있습니다.

    예시 코드:

     import express from 'express';
 import { prepareStore, renderApp } from './serverRendering';

 const app = express();

 app.get('/', (req, res) => {
   // 서버 측 상태 초기화
   prepareStore();

   // 리액트 애플리케이션 렌더링
   const appHTML = renderApp();

   // 렌더링된 HTML 전송
   res.send(`
     <html>
       <head>
         <title>MobX Server Rendering</title>
       </head>
       <body>
         <div id="root">${appHTML}</div>
         <script src="/bundle.js"></script>
       </body>
     </html>
   `);
 });

 app.listen(3000, () => {
   console.log('서버가 시작되었습니다.');
 });

마무리

이렇게 MobX를 사용하여 리액트 애플리케이션을 서버에서 렌더링할 수 있습니다. MobX는 간편한 상태 관리와 코드의 읽기성을 제공하여 개발자가 더욱 빠르고 효율적으로 애플리케이션을 구축할 수 있도록 도와줍니다.

더 자세한 내용은 MobX 공식 문서를 참조하시기 바랍니다.

© 2018 Colin. All rights reserved.