이번 블로그 포스트에서는 Immer라는 자바스크립트 라이브러리를 사용하여 트래킹 애플리케이션을 만드는 방법을 알아보겠습니다.

Immer란?

Immer는 불변성을 유지하면서도 간편하게 상태를 수정할 수 있는 기능을 제공하는 라이브러리입니다. Immer를 사용하면 복잡한 불변성 로직을 작성하지 않고도 상태를 간편하게 수정할 수 있습니다.

트래킹 애플리케이션의 요구사항

우리는 트래킹 애플리케이션을 만들어야 합니다. 이 애플리케이션은 사용자가 특정 항목을 클릭했을 때, 해당 항목의 트래킹 정보를 저장해야 합니다. 또한, 사용자는 저장된 트래킹 정보를 조회하고 수정할 수 있어야 합니다.

Immer를 사용한 트래킹 애플리케이션 구현

먼저 Immer를 설치하고, import 구문을 사용하여 Immer를 프로젝트에 가져옵니다.

npm install immer

import produce from 'immer';

다음으로, 상태 객체와 상태를 수정하는 함수를 생성합니다.

const initialState = {
  tracks: []
};

const addTrack = (state, track) => {
  return produce(state, (draftState) => {
    draftState.tracks.push(track);
  });
};

const deleteTrack = (state, trackId) => {
  return produce(state, (draftState) => {
    const index = draftState.tracks.findIndex((track) => track.id === trackId);
    if (index !== -1) {
      draftState.tracks.splice(index, 1);
    }
  });
};

위의 코드에서는 produce 함수를 사용하여 상태를 수정합니다. produce 함수는 첫 번째 인자로 상태 객체를 받고, 두 번째 인자로 상태를 수정하는 함수를 전달합니다.

addTrack 함수는 주어진 track을 tracks 배열에 추가하는 역할을 합니다.

deleteTrack 함수는 trackId에 해당하는 트랙을 tracks 배열에서 제거합니다.

트래킹 애플리케이션 사용 예시

let state = initialState; // 초기 상태

state = addTrack(state, { id: 1, name: 'Track 1' }); // 트랙 추가

console.log(state.tracks); // [{ id: 1, name: 'Track 1' }]

state = deleteTrack(state, 1); // 트랙 삭제

console.log(state.tracks); // []

위의 예시에서는 state 변수를 사용하여 상태를 관리합니다. addTrack 함수를 사용하여 트랙을 추가하고, deleteTrack 함수를 사용하여 트랙을 삭제합니다.

마무리

Immer를 사용하면 복잡한 불변성 로직을 작성하지 않고도 상태를 간편하게 수정할 수 있습니다. 트래킹 애플리케이션과 같은 상태 관리가 필요한 프로젝트에서 Immer를 활용하여 개발 생산성을 향상시킬 수 있습니다.

#Immer #트래킹 #애플리케이션