서론

이번 블로그 포스트에서는 자바스크립트의 Immer 라이브러리를 활용하여 동적 폼 컴포넌트를 구현하는 방법에 대해 알아보겠습니다. 폼 컴포넌트는 사용자로부터 입력을 받는 인터페이스 요소로, 동적인 형태의 폼을 만들기 위해서는 새로운 입력 필드를 추가하거나 제거하는 기능이 필요합니다. 이때 Immer를 사용하면 불변성을 유지하면서 쉽게 상태를 업데이트할 수 있습니다.

Immer란?

Immer는 불변성을 유지하면서 상태를 업데이트하는 데 사용되는 라이브러리입니다. 기존의 상태를 변경하는 대신, 불변성을 유지한 새로운 상태를 생성하여 변경 작업을 수행합니다. 이를 통해 코드의 가독성을 향상시키고 디버깅을 용이하게 합니다.

동적 폼 컴포넌트 구현하기

우리의 목표는 사용자가 버튼을 클릭할 때마다 폼 안에 새로운 입력 필드를 추가하는 동적 폼 컴포넌트를 구현하는 것입니다. 이를 위해 다음과 같은 단계를 따를 수 있습니다.

1. 초기 상태 설정하기

우선 초기 상태를 설정해야 합니다. 이 예제에서는 form이라는 객체를 사용하여 입력 필드의 값들을 관리합니다. 초기 상태에서 form은 빈 배열로 초기화됩니다.

import produce from 'immer';

const initialState = {
  form: [],
};

2. 입력 필드 추가하기

사용자가 버튼을 클릭할 때마다 새로운 입력 필드를 추가해야 합니다. Immer를 사용하면 이 과정을 간단하게 처리할 수 있습니다. addInputField라는 액션을 디스패치하여 새로운 입력 필드를 추가하는 addInputFieldReducer를 구현할 수 있습니다.

const addInputFieldReducer = produce((draft) => {
  draft.form.push('');
});

3. 입력 필드 제거하기

필요에 따라 사용자가 입력 필드를 제거할 수도 있어야 합니다. removeInputField라는 액션을 디스패치하여 특정 입력 필드를 제거하는 removeInputFieldReducer를 구현할 수 있습니다.

const removeInputFieldReducer = produce((draft, index) => {
  draft.form.splice(index, 1);
});

4. 컴포넌트에 상태 적용하기

마지막으로, 구현한 리듀서를 컴포넌트에 적용하여 동적 폼을 구현할 수 있습니다. form 상태를 컴포넌트의 렌더링 결과로 사용하고, addInputFieldReducer와 removeInputFieldReducer를 적절한 이벤트 핸들러와 함께 디스패치하여 상태를 변경할 수 있습니다.

// 컴포넌트 내부의 이벤트 핸들러
handleAddField = () => {
  dispatch(addInputFieldReducer());
};

handleRemoveField = (index) => {
  dispatch(removeInputFieldReducer(index));
};

// 컴포넌트 렌더링
render() {
  const { form } = this.props;

  return (
    <div>
      {form.map((value, index) => (
        <input
          key={index}
          value={value}
          onChange={this.handleChange}
        />
        <button onClick={() => this.handleRemoveField(index)}>Remove</button>
      ))}
      <button onClick={this.handleAddField}>Add</button>
    </div>
  );
}

결론

Immer를 활용하면 불변성을 유지하면서 동적인 폼 컴포넌트를 구현할 수 있습니다. Immer는 코드를 간결하고 읽기 쉽게 만들어주며, 디버깅을 용이하게 합니다. 동적인 폼을 구현하는 데 사용되는 Immer의 간단한 예제를 통해 Immer의 사용법과 장점을 익힐 수 있었습니다.

#Immer #자바스크립트