사소한 삽질 - React(Redux)

input에 대한 입력값을 받아서 state라는 객체에 저장하는 reducer함수를 구현하고 있었다.

const inputSlice = createSlice({
  name: "signupinput",
  initialState,
  reducers: {
    setUserInfo: (state = initialState, action) => {
      state.signupInfo = {
        ...state.signupInfo,
        action.payload.title: action.payload.content,
      };
      console.log(state.signupInfo);
    },
  },
});

저기서 state.signupInfo를 정의하는 부분에서 뭐가 잘 못 된건지 알지 못 했다.

"ㅇㅇ action.payload에 title이라는 key에 대한 value를 key로 두고, content라는 key에 대한 value를 value로 두는거 맞는데?

그런데 에러가 발생했다. 공식문서에 따르면 저렇게 구현하면 안 된다고 한다.

const inputSlice = createSlice({
  name: "signupinput",
  initialState,
  reducers: {
    setUserInfo: (state = initialState, action) => {
      state.signupInfo = {
        ...state.signupInfo,
        [action.payload.title]: action.payload.content,
      };
      console.log(state.signupInfo);
    },
  },
});

저렇게 key가 될 부분을 대괄호[ ]로 감싸줘야 한다고 한다.
알아두자. 이건 리덕스에서 지정한 룰이다.