Immer의 가독성을 높이기 위한 코드 스타일 팁과 규칙

27 Sep 2023

immer

Immer는 JavaScript에서 불변성을 유지하면서 객체를 수정하는 작업을 간편하게 해주는 라이브러리입니다. 이 글에서는 Immer를 사용할 때 가독성을 높이기 위한 코드 스타일 팁과 규칙을 알아보겠습니다.

1. Immer 코드를 들여쓰기

Immer를 사용할 때 코드를 들여쓰기하는 것은 가독성을 높이는 데 도움이 됩니다. 코드를 들여쓰면 Immer의 immer 함수를 사용하는 코드 블록이 시각적으로 더 잘 구분됩니다. 들여쓰기 규칙에는 공백 2칸이나 4칸을 사용할 수 있으며, 일관된 스타일을 유지하는 것이 중요합니다.

예시:

import produce from 'immer';

const initialState = {
  name: 'John',
  age: 30,
};

const reducer = (state = initialState, action) => {
  return produce(state, draft => {
    switch (action.type) {
      case 'SET_NAME':
        draft.name = action.payload;
        break;
      case 'SET_AGE':
        draft.age = action.payload;
        break;
      default:
        break;
    }
  });
};

2. 변수에 immer 함수 리턴 값을 할당하기

immer 함수의 리턴 값을 변수에 할당하면 코드의 가독성을 높일 수 있습니다. 변수에 할당함으로써, immer 함수를 실행하는 행위를 클린 코드로 작성할 수 있습니다. 이는 불변성을 유지하면서 객체를 수정할 때 어떤 변화가 일어나는지 더 명확하게 표현할 수 있는 장점이 있습니다.

예시:

const updatedState = produce(state, draft => {
  draft.name = 'Jane';
  draft.age = 25;
});
return updatedState;

3. immer 함수를 화살표 함수로 정의하기

immer 함수는 순수한 함수이므로 화살표 함수로 정의하는 것이 더 깔끔한 코드를 작성할 수 있습니다. 화살표 함수를 사용하면 함수 정의 부분을 더 간결하게 표현할 수 있으며, 코드의 가독성을 높일 수 있습니다.

예시:

const reducer = (state = initialState, action) =>
  produce(state, draft => {
    switch (action.type) {
      case 'SET_NAME':
        draft.name = action.payload;
        break;
      case 'SET_AGE':
        draft.age = action.payload;
        break;
      default:
        break;
    }
  });

#Immer #코드스타일 #가독성 #규칙

위의 코드 스타일 팁과 규칙을 따르면 Immer를 사용하는 코드를 더 읽기 쉽고 이해하기 쉽게 작성할 수 있습니다. 이러한 명확한 코드 스타일은 협업과 유지보수에도 도움이 될 것입니다.