Immer를 사용하여 미니맵 기능 구현하기

27 Sep 2023

immer

미니맵은 게임 화면의 전체 맵을 작은 크기로 축소하여 표시하는 기능입니다. 이 기능은 게임에서 플레이어가 현재 위치를 파악하고 다른 지역으로 이동할 때 유용합니다. 이번 포스트에서는 Immer 라이브러리를 사용하여 React 애플리케이션에 미니맵 기능을 구현하는 방법에 대해 알아보겠습니다.

Immer 소개

Immer는 불변성을 유지하면서 간편하게 상태를 수정할 수 있는 JavaScript 라이브러리입니다. Immer를 사용하면 복잡한 업데이트 로직의 구현을 편리하고 가독성 있게 할 수 있습니다.

미니맵 컴포넌트 생성

우선, React에서 미니맵을 표현할 컴포넌트를 생성합니다. 이 컴포넌트는 전체 맵 정보와 현재 플레이어의 위치를 받아와 화면에 그립니다. 아래는 미니맵 컴포넌트의 예시 코드입니다.

import React from 'react';
import { produce } from 'immer';

class Minimap extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      mapData: [],
      playerPosition: { x: 0, y: 0 }
    };
  }

  componentDidMount() {
    // 전체 맵 정보 초기화 및 플레이어 위치 갱신
    const mapData = [
      // 맵 데이터 배열
    ];
    const playerPosition = {
      x: 5, // 플레이어의 초기 x 위치
      y: 5, // 플레이어의 초기 y 위치
    };

    this.setState({ mapData, playerPosition });
  }

  movePlayer = (x, y) => {
    this.setState(
      produce((draft) => {
        draft.playerPosition.x += x; // x만큼 플레이어의 x 위치 업데이트
        draft.playerPosition.y += y; // y만큼 플레이어의 y 위치 업데이트
      })
    );
  };

  render() {
    // 미니맵 렌더링 로직
    return (
      <div>
        <h2>미니맵</h2>
        {/* 미니맵을 표시하는 UI */}
      </div>
    );
  }
}

export default Minimap;

위 코드에서는 mapData 배열에 전체 맵의 정보를 저장하고, playerPosition 객체에 현재 플레이어의 위치를 저장합니다. componentDidMount() 메서드에서는 초기 맵 데이터와 초기 플레이어 위치를 설정합니다.

movePlayer() 메서드는 플레이어가 움직일 때 호출되어 플레이어 위치를 업데이트합니다. Immer의 produce() 함수를 사용하여 상태를 수정하면서도 불변성을 유지할 수 있습니다.

미니맵 컴포넌트 사용

이제 미니맵 컴포넌트를 기존의 React 애플리케이션에 추가하여 사용할 수 있습니다. 예를 들어, 메인 게임 화면에서 미니맵을 표시하고 플레이어가 이동할 때마다 movePlayer() 메서드를 호출하여 플레이어 위치를 업데이트할 수 있습니다.

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

class Game extends React.Component {
  handleMovePlayer = (x, y) => {
    // 플레이어 이동 관련 로직
  };

  render() {
    return (
      <div>
        {/* 게임 화면 UI */}
        <Minimap onMovePlayer={this.handleMovePlayer} />
      </div>
    );
  }
}

export default Game;

위 코드에서는 Game 컴포넌트에서 Minimap 컴포넌트를 렌더링하고, handleMovePlayer() 메서드를 전달하여 플레이어 이동 관련 로직을 처리할 수 있습니다.

결론

Immer를 사용하여 React 애플리케이션에 미니맵 기능을 구현하는 방법을 알아보았습니다. 이를 활용하여 게임에서 플레이어의 위치 파악과 다른 지역으로의 이동을 간편하게 구현할 수 있습니다. Immer는 매우 편리한 라이브러리이니, React 상태 관리에 사용해 보시길 추천드립니다.

#React #Immer #미니맵 #게임