리액트, 자바스크립트 공부하기 - JSON, fetch, 비동기 함수(axios)

JSON을 개념적으로 강의를 들을 땐 

그렇구나. 그냥 이런 개념이구나 하고 이해는 하고 넘어갔는데..

막상 프로젝트에서 직접 사용하려고 해보니, 그냥 대충 알아서는 도저히 써먹을 수 없겠더라.

 

다행인건 대략적으로 개념을 공부했었던 기억이 있으니, 다른 강의나 교재를 보니

아~ 이게 이거구나. 이래서 이걸 쓴 거구나 했다.

 

그 땐 왜, parse를 쓰고 stringipy? 이런건 대체 왜 쓰고 했나 했는데

 

그 때 메모해둔 것들이 지금 보니 다시 새롭고, 이유가 있었네 ~ 싶다.

 

이렇게 하나 하나 익숙해져가고 쓸 줄 아는 

느리지만 천천히 잘 되어 가고 있단 증거 !

 

 

내 자신 대견해 .. ~~

---

이미 알았지만(?) 

정말 머리에 이제 박힌 개념으로는

우선 JSON이란건 문자열.. 이지만, 보이는 건 객체처럼 보인다는 것.

 

따라서..

비동기 함수를 사용해서 json파일을 받아오면.. 그건 실제로는 문자열 타입이니까,

자바스크립트나 리액트에서 사용하려면 (예를 들어 map()) 그걸 객체나 배열 형태로 만들어야 하니까 parse를 쓰는거야 ?

 

-> 정확하다.

맞아요, Jane! 🎯
response.json() 안에는 이미 **JSON.parse()**가 숨어 있어요.

 

🐰 자세히 보면:

const jsonData = await response.json();

이 한 줄은 사실 아래와 같은 흐름으로 작동해요:

1. 서버에서 받은 데이터는 텍스트(JSON 문자열) 상태예요.
2. response.json()은 그 텍스트를 자동으로 JSON.parse() 해줘서,
3. 결과적으로 JavaScript 객체 또는 배열로 바꿔줘요.

즉, 우리가 직접 JSON.parse(await response.text())를 할 필요 없이
.json()이 그 과정을 대신 해주는 거죠.

✓참고로:

• response.text() → JSON 문자열 (예: "{"name":"Jane"}")
• response.json() → JavaScript 객체 (예: { name: "Jane" })

---

제이슨에 대한 정리는 아래에 아주 잘 정리 해두었습니다.

자바스크립트 공부하기 - JSON

---

 

그러면 이렇게 비동기 처리를 할 수 있는 함수들을 공부해보겠다.

나에겐  강의에서 들은 XMLHttpRequest나 fetch가 익숙한데, 

요즘 더 쉽고 간단한 방법이 있다고 함!

---

보통 리액트에서는 XMLHttpRequest를 직접 쓰기보다는

더 간단하고 현대적인 방식인 fetch나 axios 같은 라이브러리를 주로 사용해요. 이유는 다음과 같아요:

✓왜 fetch나 axios를 선호할까?

방식	특징
XMLHttpRequest	예전 방식. 코드가 복잡하고 비동기 처리가 번거로움 (콜백 지옥 발생 가능)
fetch	브라우저 내장 최신 API. Promise 기반으로 훨씬 간단함
axios	외부 라이브러리. fetch보다도 편리한 기능들 제공 (예: 자동 JSON 변환, 에러 처리 등)

 

예시 비교

✨ XMLHttpRequest

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data");
xhr.onload = () => {
  if (xhr.status === 200) {
    console.log(JSON.parse(xhr.responseText));
  }
};
xhr.send();

✨ fetch (리액트에서 주로 사용)

fetch("https://api.example.com/data")
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

 

---

그럼 난 뭘 써야 할까 ? 다 할 줄 알아야하니까.. 전부 공부할까?

 

✨ 결론부터 말하면:

기본 개념은 알아두되, 실전에서는 fetch나 axios를 중심으로 공부하는 게 좋아요.

---

이유를 정리해보면:

1. 기본 개념 (XMLHttpRequest)은 왜 알아야 할까?

• 웹의 원리를 이해하는 데 도움이 돼요 (HTTP 요청이 어떻게 작동하는지).
• 옛날 코드나 면접 질문에서 나올 수도 있어요.
• 하지만 직접 자주 쓰진 않아요.

2. 실무나 리액트 프로젝트에서는?

• fetch나 axios로 거의 모든 네트워크 요청을 처리해요.
• 문법이 간단하고 코드도 깔끔해져요.
• 에러 처리나 응답 처리도 훨씬 편리해요.

 

🧚‍♀️ 추천 학습 순서

1. XMLHttpRequest는 가볍게 구조만 이해하기 (1~2시간 정도면 충분)
2. 그다음 fetch를 제대로 익히기 (Promise, async/await까지)
3. 그리고 나중에 필요하면 axios도 사용해보기 (라이브러리 설치 경험 포함)

 

---

API 받아올 때, fetch쓰는 코드 분석

 

✓ 1. 기본 개념

웹에서는 서버에서 데이터를 받아올 때 fetch() 같은 함수를 써. 예를 들어 영화 목록, 날씨 정보, 유저 정보 같은 걸 받아올 수 있어.

---

✓ 2. fetch()와 .then() 사용 예시

import React, { useEffect, useState } from 'react';

function MyComponent() {
  const [data, setData] = useState(null); // 받아온 데이터 저장

  useEffect(() => {
    fetch('https://api.example.com/data') // 데이터 요청
      .then(response => response.json())  // 응답을 JSON 형태로 변환
      .then(result => {
        setData(result); // 데이터 저장
      })
      .catch(error => {
        console.error('에러 발생:', error);
      });
  }, []); // 처음 렌더링될 때 한 번만 실행

  return (
    <div>
      {data ? <pre>{JSON.stringify(data, null, 2)}</pre> : '로딩 중...'}
    </div>
  );
}

export default MyComponent;

---

✓.then()은 왜 쓰는 걸까?

fetch()는 데이터를 "바로" 리턴하지 않고 "나중에" 받을 걸 약속하는 Promise(약속) 를 리턴해.

• then()은 "데이터가 오면 이걸 해줘" 라는 뜻이야.
• 쉽게 말하면:
  → "fetch로 요청 보낼게! 그 다음(then)에 데이터 오면 처리해줘~"

---

✓ async/await로 더 간단히도 쓸 수 있어

useEffect(() => {
  const getData = async () => {
    try {
      const response = await fetch('https://api.example.com/data');
      const result = await response.json();
      setData(result);
    } catch (error) {
      console.error('에러 발생:', error);
    }
  };

  getData();
}, []);

→ 이건 then() 대신 await를 써서 코드가 더 자연스럽고 읽기 쉬움!