[React]JSON변화과 Fetch흐름

3. 비동기 통신의 기초: JSON 변환과 fetch의 흐름

브라우저와 서버가 데이터를 주고받을 때는 텍스트 형태인 JSON(JavaScript Object Notation) 형식을 사용하며, 이를 위해 적절한 변환 과정이 필요함

데이터를 보낼 때는 객체를 문자열로 만들고, 받을 때는 문자열을 다시 객체로 바꾸는 과정이 핵심이다.

---

데이터 변환의 핵심: JSON 활용

웹 통신에서 자바스크립트 객체를 그대로 전송할 수 없으므로, 약속된 문자열 형식인 JSON으로 변환한다.

❖ JSON 변환 규칙:

• JSON.stringify(data): 자바스크립트 객체를 JSON 문자열로 변환 (서버로 보낼 때 사용)
• JSON.parse(text): JSON 문자열을 자바스크립트 객체로 변환 (서버에서 받은 데이터를 쓸 때 사용)
• .json(): fetch 응답(Response) 바디를 자바스크립트 객체로 자동 변환해주는 메서드

.json()은 내부적으로 JSON.parse를 수행하며, 비동기 처리가 필요하므로 반드시 await와 함께 써야 한다.

---

비동기 통신 실전 예시

서버에서 데이터를 가져오거나 수정할 때의 일반적인 흐름은 다음과 같다.

async function updateUserData(userData) {
  // 1. 데이터를 보낼 때는 문자열로 직렬화(stringify)
  const response = await fetch('[https://api.example.com/user](https://api.example.com/user)', {
    method: 'POST',
    body: JSON.stringify(userData), 
    headers: { 'Content-Type': 'application/json' }
  });

  // 2. 데이터를 받을 때는 문자열을 객체로 역직렬화(json())
  const data = await response.json(); 
  return data;
}

데이터 처리 프로세스

1. 화면에서 먼저 상태 업데이트: 사용자 경험을 위해 (낙관적 업데이트 등) 상태를 조절함

2. await를 사용한 서버 통신: 서버의 응답이 올 때까지 코드 실행을 일시 중지하고 기다림

3. 결과 처리: 응답받은 데이터를 바탕으로 최종 상태를 확정함

fetch 통신의 주의사항

단순히 fetch를 호출하는 것만으로는 부족하다. 서버가 응답을 생성하고 이를 브라우저가 해석할 수 있는 객체로 변환하는 데 시간이 걸리기 때문이다.

❖ 비동기 처리 규칙:

• HTTP 요청을 생성하고 서버로 전송하는 기본 브라우저 동작은 await를 통해 순차적으로 처리한다.

• 응답 데이터(response.json())도 비동기 작업이므로 잊지 말고 await를 붙여야 한다.