[javascript] MobX와 라이트 박스 구현

04 Dec 2023

javascript

MobX는 상태 관리 라이브러리로서 React와 함께 사용하기에 아주 편리합니다. 이번 포스트에서는 MobX를 사용하여 간단한 라이트 박스를 구현하는 방법에 대해 알아보겠습니다.

1. MobX 설치

먼저 MobX를 설치해야 합니다. 다음 명령을 터미널에서 실행하여 MobX를 설치합니다.

npm install mobx mobx-react

2. 상태 관리하기

MobX를 사용하여 라이트 박스를 구현하기 위해 상태를 관리해야 합니다.

import { observable, action } from 'mobx';

class LightboxStore {
  @observable isOpen = false;
  @observable currentImage = '';

  @action openLightbox = (image) => {
    this.isOpen = true;
    this.currentImage = image;
  }

  @action closeLightbox = () => {
    this.isOpen = false;
    this.currentImage = '';
  }
}

export default new LightboxStore();

위 코드에서 observable 데코레이터를 사용하여 상태를 관찰 가능하게 만듭니다. @observable isOpen은 라이트 박스가 열려 있는지를 나타내는 상태이고, @observable currentImage는 현재 표시된 이미지의 URL입니다.

@action 데코레이터를 사용하여 액션 메서드를 정의합니다. openLightbox 메서드는 라이트 박스를 열고 현재 표시할 이미지를 설정하고, closeLightbox 메서드는 라이트 박스를 닫고 현재 이미지를 초기화합니다.

3. 컴포넌트 구현하기

다음으로는 MobX 상태를 사용하여 라이트 박스 컴포넌트를 구현해야 합니다.

import React from 'react';
import { observer } from 'mobx-react';
import lightboxStore from './lightboxStore';

const Lightbox = observer(() => {
  return (
    <div className={`lightbox ${lightboxStore.isOpen ? 'open' : ''}`}>
      {lightboxStore.isOpen && (
        <div className="lightbox-content">
          <img src={lightboxStore.currentImage} alt="Lightbox Image" />
          <button className="close-button" onClick={lightboxStore.closeLightbox}>
            Close
          </button>
        </div>
      )}
    </div>
  );
});

export default Lightbox;

observer 함수를 사용하여 MobX 상태를 감시하도록 컴포넌트를 감싸줍니다. lightboxStore.isOpen이 true일 때만 라이트 박스를 열고, lightboxStore.currentImage를 표시하는 간단한 구현입니다. closeLightbox 메서드가 호출되면 라이트 박스가 닫힙니다.

4. 사용하기

이제 라이트 박스를 사용할 컴포넌트에서 Lightbox 컴포넌트를 import하고 렌더링하면 됩니다.

import React from 'react';
import Lightbox from './Lightbox';

const App = () => {
  return (
    <div>
      // 다른 컴포넌트들...
      <Lightbox />
    </div>
  );
};

export default App;

만약 openLightbox 메서드를 호출하여 라이트 박스를 열고 이미지를 설정하려면 다음과 같이 사용할 수 있습니다.

import React from 'react';
import lightboxStore from './lightboxStore';

const SomeComponent = () => {
  const handleImageClick = (image) => {
    lightboxStore.openLightbox(image);
  };

  return (
    <div>
      // 다른 컴포넌트들...
      <img src="path/to/image" alt="Image" onClick={() => handleImageClick("path/to/image")} />
    </div>
  );
};

export default SomeComponent;

결론

MobX를 사용하여 간단한 라이트 박스를 구현하는 방법에 대해 알아보았습니다. MobX는 React와 함께 사용할 때 매우 편리하고 강력한 상태 관리 라이브러리입니다. MobX를 통해 애플리케이션의 상태를 쉽게 관리할 수 있습니다.