setSate((data) => ({ ...prev, data:data })); 의 의미

 setSate((data) => ({ ...prev, data:data })); 의 의미

 

#풀소스

import { useState } from "react";

interface UseMutationState {
  loading: boolean;
  data?: object;
  error?: object;
}
type UseMutationResult = [(data: any) => void, UseMutationState];

export default function useMutation(url: string): UseMutationResult {
  const [state, setState] = useState<UseMutationState>({
    loading: false,
    data: undefined,
    error: undefined,
  });
  function mutation(data: any) {
    setState((prev) => ({ ...prev, loading: true }));
    fetch(url, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
    })
      .then((response) => response.json().catch(() => {}))
      .then((data) => setState((prev) => ({ ...prev, data }))) //...prev,data:data
      .catch((error) => setState((prev) => ({ ...prev, error })))//...prev,data:error
      .finally(() => setState((prev) => ({ ...prev, loading: false })));
  }
  return [mutation, { ...state }];
}

 

#위에 정보는 아래 처럼 나열된 것 과 같다

축약된 표현으로써 ...을 사용함으로써 리스트를 나열하고, 맨 마지막에 data 파라미터 값을 넣어주는 것이다.

data는 서로 이름이 같아서 매칭될 수 있어서 축약되었다.

 //.then((data) => setState((prev) => ({ ...prev, data }))) //...prev,data:data
  setState((prev)=>({isLoading:prev.isLoading, data:prev.data, error:prev.error, data:data})

 

#풀이