Object.fromEntries(formData)??

(08-10 AxiosHelper의 코드를 보던 와중)
Q1.
params: formData && Object.fromEntries(formData) 이 코드에서, Object.fromEntries(fromData)는 무엇을 하는 코드야?



A1.
Object.fromEntries(formData)

는 formData를 키-값 쌍의 일반 객체로 변환하는 역할을 합니다.

FormData 객체는 폼 데이터를 다루기 위한 전용 객체로, 일반적인 객체와 다르게 동작합니다. 하지만 Axios에서 params 옵션은 일반 객체를 필요로 합니다. 따라서 FormData 객체를 그대로 params에 전달할 수 없으므로, Object.fromEntries를 사용하여 FormData를 일반 객체로 변환하는 것입니다.


코드를 살펴보면:

params: formData && Object.fromEntries(formData)

1) formData가 존재하면(null이나 undefined가 아니면) Object.fromEntries(formData)를 실행하여 formData를 일반 객체로 변환합니다.
2) formData가 존재하지 않으면 params 값은 undefined가 되어 Axios에서 해당 옵션을 무시합니다.

이렇게 변환된 일반 객체는 Axios의 params 옵션에 전달되어, GET 요청의 쿼리 스트링으로 자동 변환됩니다. 즉, 다음과 같은 URL이 생성됩니다:

GET /api?key1=value1&key2=value2


예를 들어, formData에 username=alice, age=30이 들어있다면:

const formData = new FormData();
formData.append('username', 'alice');
formData.append('age', '30');

const response = await axios.get('/api', {
  params: Object.fromEntries(formData)
});

이렇게 하면 실제로는 다음과 같은 요청이 보내집니다:

GET /api?username=alice&age=30


요약하면, Object.fromEntries(formData)는 FormData 객체를 일반 객체로 변환하여 Axios의 params 옵션에 맞게 전달하는 역할을 합니다.