[React Axios] .then / async-await 함수 비교 실습

1. .then() vs async/await (비동기 처리 방식)

가장 핵심적인 차이입니다.

• 주석 처리된 코드 (.then()): Promise 객체의 메서드를 체이닝(Chaining)하는 방식입니다. 비동기 작업이 끝나면 then 안의 콜백 함수를 실행하라고 예약하는 방식이죠. 단계가 많아질수록 코드가 오른쪽으로 밀리는 '콜백 지옥'과 비슷한 현상이 생길 수 있습니다.
• 주석 안 된 코드 (async/await): 비동기 코드를 마치 **동기 코드(순서대로 실행되는 코드)**처럼 보이게 작성하는 최신 문법입니다. await를 붙이면 해당 작업이 끝날 때까지 기다렸다가 다음 줄을 실행하므로 흐름을 파악하기가 훨씬 쉽습니다.

---

2. 에러 처리 방식 (catch vs try-catch)

비동기 통신은 네트워크 문제 등으로 실패할 확률이 높기 때문에 에러 처리가 중요합니다.

• 주석 처리된 코드: .catch((err) => { ... }) 메서드를 사용하여 에러를 잡아냅니다.
• 주석 안 된 코드: 일반적인 프로그래밍에서 쓰이는 try { ... } catch (err) { ... } 문을 사용하여 비동기 작업 중 발생하는 모든 에러를 한곳에서 처리합니다.

---

3. Axios 사용 방식 (단축형 vs 옵션형)

axiosSelectById 부분의 주석 차이를 보면 axios를 호출하는 스타일의 차이가 보입니다.

• 주석 처리된 코드 (Config 방식):객체 안에 메서드와 URL을 일일이 지정하는 방식입니다. 설정할 옵션(헤더, 데이터 등)이 많을 때 주로 사용합니다.
• JavaScript

   

  axios({
    method: "GET",
    url: "..."
  })
  

• 주석 안 된 코드 (단축 메서드 방식):이미 작성하신 axiosSelectAll처럼 단축해서 쓸 수도 있고, 주석 안 된 부분처럼 axios({ ... })를 그대로 쓰면서 문법만 await로 바꿀 수도 있습니다.
• JavaScript

   

  axios.get("URL")
  

---

비교 요약표

구분	주석 처리된 코드 (Promise)	주석 안 된 코드 (async/await)
코드 스타일	콜백 함수 기반 (.then)	선언적 스타일 (await)
가독성	로직이 복잡해지면 읽기 어려움	위에서 아래로 순서대로 읽혀서 좋음
에러 처리	.catch() 사용	try-catch문 사용
최신 트렌드	전통적인 방식	현재 권장되는 방식

결론

작성하신 코드에서 주석을 풀고 사용하시는 async/await 방식이 훨씬 세련되고 유지보수하기 좋은 코드입니다. 실무에서도 특별한 이유가 없다면 async/await를 기본으로 사용합니다.

해당 프로젝트에 들어가서 npm install axios로 axios를 깔아줍니다. 

import './App.css'
import axios from 'axios';


function App() {
  //fetch함수로 비동기 통신
  const selectAll = async()=>{
    try{      
       const res = await fetch("https://jsonplaceholder.typicode.com/users")
     const jsonResult = await res.json();
     jsonResult.forEach((user, index)=>{
        console.log(index+"=" +user.id + "|" + user.name + "|" + user.email);
     
     });
    } catch(err){
        console.log(err);
    }

  }
//axios 사용하기 
const axiosSelectAll =()=>{
  axios
  .get("https://jsonplaceholder.typicode.com/users")
  .then((result)=>{
    console.log(result)
  })
  .catch(()=>{

  })
}

const axiosSelectById = ()=>{

}
  return(
    <>
    <h1>fecth test</h1>
    <button onClick ={selectAll}>get - selectAll</button>

<h1>Axios test</h1>
<button onClick={axiosSelectAll}>get - selectAll</button>
<button onClick={axiosSelectById}>get = selectById</button>
    <h3>json -server 연동하기 </h3>
    </>
  )
}

export default App

Axios 함수도 추가된 버전

import './App.css'
import axios from 'axios';


function App() {
  //fetch함수로 비동기 통신
 const selectAll = async()=>{
    try{      
        const res = await fetch("https://jsonplaceholder.typicode.com/users")
        const jsonResult = await res.json();
        jsonResult.forEach((user, index)=>{
        console.log(index+"=" +user.id + "|" + user.name + "|" + user.email);
     
     });
    } catch(err){
        console.log(err);
    }

  }
//axios 사용하기 
// 
 const axiosSelectAll =async()=> {
try {
const result = await axios.get("https://jsonplaceholder.typicode.com/users")
console.log(result.date)

result.data.forEach((user, index)=>{
   console.log(index+"=" +user.id + "|" + user.name + "|" + user.email);
});
}catch(err){
  console.log(err);
}
}

// const axiosSelectAll =()=>{
//   axios
//   .get("https://jsonplaceholder.typicode.com/users")
//   .then((result)=>{

//     console.log(result)
//   })
//   .catch(()=>{

//   })
// }

const axiosSelectById = ()=>{

}
  return(
    <>
    <h1>fecth test</h1>
    <button onClick ={selectAll}>get - selectAll</button>

<h1>Axios test</h1>
<button onClick={axiosSelectAll}>get - selectAll</button>
<button onClick={axiosSelectById}>get = selectById</button>
    <h3>json -server 연동하기 </h3>
    </>
  )
}

export default App

const serverIp = import.meta.env.VITE_API_SERVER_IP;

function App() {
  console.log(serverIp)

.env를 만들어서 server ip를 지정해준다 (alias)

완성본 app.jsx

import './App.css'
import axios from 'axios';

const serverIp = import.meta.env.VITE_API_SERVER_IP;

function App() {
  console.log(serverIp)
  //fetch함수로 비동기 통신
 const selectAll = async()=>{
    try{      
        const res = await fetch(serverIp+"/users")
        const jsonResult = await res.json();
        jsonResult.forEach((user, index)=>{
        console.log(index+"=" +user.id + "|" + user.name + "|" + user.email);
     
     });
    } catch(err){
        console.log(err);
    }

  }
//axios 사용하기 
// 
 const axiosSelectAll =async()=> {
try {
const result = await axios.get("https://jsonplaceholder.typicode.com/users")
console.log(result.date)

result.data.forEach((user, index)=>{
   console.log(index+"=" +user.id + "|" + user.name + "|" + user.email);
});
}catch(err){
  console.log(err);
}
}

// const axiosSelectAll =()=>{
//   axios
//   .get("https://jsonplaceholder.typicode.com/users")
//   .then((result)=>{

//     console.log(result)
//   })
//   .catch(()=>{

//   })
// }

const axiosSelectById = async()=>{
/*
 const axiosSelectById = ()=>{
  axios({
    method:"GET",
    url : "https://jsonplaceholder.typicode.com/users/6"
    //data:
  })
  .then((result)=>{
    console.log(result.data)
  })
  .catch((err)=>console.log(err))

*/

try{
 const result = await axios({
    method:"GET",
    url : "https://jsonplaceholder.typicode.com/users/5"
    //data:
  })
console.log(result.data)
}catch(err){
  console.log(err)
}
}

  return(
    <>
    <h1>fecth test</h1>
    <button onClick ={selectAll}>get - selectAll</button>

<h1>Axios test</h1>
<button onClick={axiosSelectAll}>get - selectAll</button>
<button onClick={axiosSelectById}>get = selectById</button>
    <h3>json -server 연동하기 </h3>
    </>
  )
}

export default App