[React.js] 객체 표기법(Object Notation) 방식과 빌더 콜백 표기법(Builder Callback Notation) 방식

객체 표기법(Object Notation) 방식과 빌더 콜백 표기법(Builder Callback Notation) 방식

들어가며

• 리덕스 툴킷(Redux Toolkit, RTK)의 객체 표기법(Object Notation) 방식과 빌더 콜백 표기법(Builder Callback Notation) 방식에 대해 정리해본다.

 

객체 표기법(Object Notation) 방식 vs. 빌더 콜백 표기법(Builder Callback Notation) 방식

• RTK 버전 1.6.0 이상부터 기존의 객체 표기법(Object Notation) 방식에서 빌더 콜백 표기법(Bulder Callback Notation) 방식으로 작성해야 한다.
• 기존의 객체 표기법은 더 이상 사용되지 않는다.

 

객체 표기법(Object Notation)

개념

• 객체(Object) 형태로 액션 타입과 리듀서를 정의하는 방식
• 키(Key)는 액션 타입(문자열)이고, 값(Value)은 해당 액션 타입을 처리하는 리듀서 함수이다.

 

특징

• 단순한 로직에 적합하여 직관적이다.
• 액션 타입을 문자열로 명시해야 하므로, 타입 안전성이 떨어진다.
• 타입스크립트(TypeScript) 사용 시, 자동 완성 기능을 활용하기 어렵다.

 

예제 코드

const jobSlice = createSlice({
  name: 'job',
  initialState,
  reducers: {
    handleChange: (state, { payload: { name, value } }) => {
      state[name] = value;
    },
    clearValues: () => {
      return initialState;
    },
  },
  extraReducers: {
    [createJob.pending]: (state) => {
      state.isLoading = true;
    },
    [createJob.fulfilled]: (state, action) => {
      state.isLoading = false;
      toast.success('Job Created!');
    },
    [createJob.rejected]: (state, { payload }) => {
      state.isLoading = false;
      toast.error(`${payload}.`);
    },
  },
});

 

빌더 콜백 표기법(Bulder Callback Notation)

개념

• @builder@ 객체를 인자로 받아 @addCase@ 메서드로 액션 타입과 리듀서를 연결하는 방식
• @addCase@는 @createAction@ 또는 @createAsyncThunk@를 활용해 타입 안전성을 제공한다.

 

특징

• 액션 타입과 리듀서를 연결할 때 자동 완성과 타입 검사가 지원된다.
• 체이닝(Chaining) 방식으로 여러 액션을 간단하게 연결할 수 있다.
• 조건부 논리 추가 및 복잡한 로직에 적합하다.

 

예제 코드

const jobSlice = createSlice({
  name: 'job',
  initialState,
  reducers: {
    handleChange: (state, { payload: { name, value } }) => {
      state[name] = value;
    },
    clearValues: () => {
      return initialState;
    },
    extraReducers: (builder) => {
      builder
        .addCase(createJob.pending, (state) => {
          state.isLoading = true;
        })
        .addCase(createJob.fulfilled, (state, action) => {
          state.isLoading = false;
          toast.success('Job Created!');
        })
        .addCase(createJob.rejected, (state, { payload }) => {
          state.isLoading = false;
          toast.error(`${payload}.`);
        });
    },
  },
});

 

비교

• RTK 1.6.0 버전 이상부터는 객체 표기법(Object Notation)을 사용할 수 없고, 빌더 콜백 표기법(Builder Callback Notation)을 무조건 사용해야 한다.
  • 객체 표기법(Object Notation)을 사용할 경우, 오류가 발생하며 빌드가 되지 않는다.

특징	객체 표기법(Object Notation)	빌더 콜백 표기법(Builder Callback Notation)
문법	객체 형태로 키-값 매핑	체이닝 방식으로 리듀서 연결
타입 안정성	문자열 기반, 타입 안전성 낮음	타입스크립트(TypeScript)와 연계하여 타입 안정성 보장
가독성	간단하지만 복잡한 로직에서는 비효율적	체이닝 방식으로 가독성 향상
유연성	단순한 로직에 적합	복잡한 조건부 로직 및 추가 논리에 적합

 

참고 사이트

createSlice | Redux Toolkit

Latest Redux Toolkit: Using the Builder Callback Notation in createReducer 💻