.then((response) => response.data);

export const getRooms = () => instance.get("rooms/").then((response) => response.data); export const getRooms = () => instance.get("rooms/") 차이점

 

 

getRooms 함수에서 두 번째 줄인 instance.get("rooms/")는 Axios 인스턴스 instance를 통해 "rooms/" 엔드포인트로 GET 요청을 보내고, 이에 대한 응답을 Promise로 반환합니다. 이후 .then()을 통해 응답 데이터인 response.data에 접근하여 해당 데이터를 반환하도록 되어 있습니다.

두 번째 코드는 getRooms 함수가 instance.get("rooms/")만을 반환하도록 수정한 것입니다. 이 코드는 동일한 GET 요청을 보내는 것이지만, 응답 데이터를 처리하는 부분이 생략되어 있으므로 반환값은 Promise 객체 전체가 됩니다. 이 반환값은 .then() 또는 async/await를 통해 응답 데이터에 접근해 처리해야 합니다.

따라서, 첫 번째 코드는 GET 요청과 응답 데이터 처리를 함께 수행하는 반면, 두 번째 코드는 GET 요청만을 수행합니다.

 

 

언제 어떤걸 사용해야해?

then()은 Promise 객체가 반환된 이후에 그 결과를 다루기 위해 사용됩니다. 즉, 비동기 작업의 결과가 나타나면 해당 결과를 처리하고 싶을 때 사용됩니다.

따라서, 반환된 데이터에 대한 추가적인 처리나 변환 작업이 필요한 경우 then()을 사용합니다.

반면에 async/await는 Promise를 반환하는 함수를 호출하여 비동기 작업을 수행하고 그 결과를 변수에 할당할 수 있습니다. 이를 통해 코드의 가독성을 높일 수 있으며, then() 체인의 중첩과 콜백 지옥을 피할 수 있습니다.

따라서, 반환된 데이터를 변수에 할당하고 추가적인 처리 작업을 수행하고 싶은 경우에는 async/await를 사용합니다. 하지만, 이러한 경우에도 필요한 경우에는 then()을 사용하여 결과를 처리할 수 있습니다.

 

 

 

then()은 TypeScript이 아닌 일반적인 자바스크립트에서도 사용 가능합니다. then()은 Promise 객체에서 제공되는 메소드 중 하나이며, Promise 객체가 비동기적으로 처리된 결과를 받아올 때 사용됩니다. 따라서 JavaScript와 TypeScript 모두에서 Promise 객체를 사용할 수 있는 경우에 then()을 사용할 수 있습니다.

 

 

 

Promise를 다룰 때는 then 메소드를 사용하는 것이 보편적인 방법입니다. 따라서, then 메소드를 사용하는 것이 좋습니다.

async/await 문법을 사용하면 코드가 더 간결해지고 가독성이 좋아질 수 있지만, Promise를 이해하고 있어야 한다는 점과, 코드가 복잡해질 때 이해하기 어려워질 수 있다는 단점이 있습니다.

그러므로, Promise를 다룰 때는 then 메소드를 사용하는 것이 좋고, async/await 문법을 사용할 때는 코드의 간결함과 가독성을 위해 적절히 사용하는 것이 좋습니다.

 

 

리액트 자체적으로는 async/await 문법을 지원하지 않습니다. 그러나 자바스크립트 언어 자체에서 지원하는 비동기 처리 방식을 활용하여 비동기 처리를 할 수 있습니다.

주로 async/await 문법을 사용하는 이유는, Promise를 반환하는 비동기 함수를 호출할 때 간결하게 코드를 작성할 수 있기 때문입니다. Promise를 반환하는 함수가 많은 경우에는 async/await를 사용하면 코드의 가독성과 유지보수성이 좋아지는 경우가 많습니다.

하지만, 리액트 컴포넌트 내부에서 네트워크 요청 등의 비동기 처리를 할 때, async/await를 사용하지 않고도 Promise나 콜백 함수를 사용하여 비동기 처리를 할 수 있습니다. 예를 들어 axios와 같은 라이브러리에서는 Promise를 반환하므로, .then() 메서드를 이용하여 비동기 처리를 할 수 있습니다.

결론적으로, async/await 문법을 사용하지 않고도 리액트에서 비동기 처리를 할 수 있으며, 상황에 따라서는 async/await보다 Promise나 콜백 함수를 사용하는 것이 더 적합한 경우도 있습니다.

 

 

 

 

 

 

 

*************************************************************************************************************************************

.then((response) => response.data)를 생략하느냐 쓰느냐는 개인적인 취향이나 팀의 코드 스타일에 따라 다를 수 있습니다.

하지만 일반적으로 .then((response) => response.data)는 매우 자주 사용되는 코드이기 때문에, 이를 간단하게 줄여서 표현하면 코드의 가독성이 개선되며 불필요한 코드 양을 줄일 수 있습니다.

따라서 많은 개발자들은 .then((response) => response.data)를 생략하여 코드를 작성합니다. 하지만 이 경우 해당 함수가 에러를 발생시킬 경우 .catch()로 에러를 처리할 수 없게 됩니다. 따라서 에러 처리가 필요한 경우에는 생략하지 않고 .then((response) => response.data)를 명시적으로 작성하는 것이 좋습니다.

*************************************************************************************************************************************