step 1. 문제 코드

import { useState, useEffect } from "react";

const App = () => {
  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts/1")
      .then((response) => response.json())
      .then((json) => console.log(json));
  }, []);

  return <div>{/* <h1>{message}</h1> */}</div>;
};

export default App;

step 2. 코드 설명

(1) 기능 개요

이 코드는 컴포넌트가 화면에 나타날 때 useEffect 에 의해 비동기적으로 데이터를 가져온다. fetch 함수를 사용해서 URL에서 데이터를 요청하고, 요청이 성공하면 데이터를 JSON 형식으로 변환한 후 콘솔에 출력한다.

(2) 특이사항

fetch 함수는 비동기적으로 데이터를 가져오는 데 사용된다. 데이터를 가져오는 동안 다른 작업도 할 수 있다.
Promise 객체를 반환하며, .then 메서드를 통해 결과를 처리한다.
useEffect 라는 React 기능을 사용하여 컴포넌트가 처음 렌더링 된 후 데이터를 가져온다.
이 기능은 컴포넌트가 화면에 표시될 때만 작동하고, 빈 의존성 배열 [] 은 컴포넌트가 처음 렌더링될 때만 이펙트가 실행되도록 보장한다.

(3) 사용된 라이브러리/모듈

JavaScript 기본 내장 객체: Promise → 비동기 작업의 결과를 처리한다.
React의 useEffect 훅 → 컴포넌트의 렌더링 이후 비동기 작업을 수행한다.
fetch API → 비동기적으로 데이터를 요청하고 Promise 를 반환한다.

step 3. 코드 분석

(1) 주요 함수/클래스

함수/클래스 이름: fetch
매개변수: url (데이터를 요청할 웹 주소)
반환값: Promise 객체 (비동기적으로 데이터 요청 결과를 처리한다.)
특이사항: fetch 함수는 네트워크 요청을 비동기적으로 처리하고, 결과를 Promise 로 변환한다. 이 Promise 는 요청이 성공하거나 실패할 떄의 처리를 .then 과 .catch 로 할 수 있다.

(2) 흐름 설명

주요 로직:
1. 컴포넌트가 처음 화면에 나타날 때(렌더링 될 때) useEffect 가 실행된다.
2. fetch 함수를 호출하여 데이터 요청을 시작한다.
3. fetch 는 Promise 를 반환하고, 데이터 요청이 완료되면 response.json() 을 통한 JSON 형식으로 변환한다.
4. 변환된 JSON 데이터는 console.log를 통해 출력된다.
예외 처리: 코드에 오류 처리 로직이 없으므로, 요청이 실패하면 아무런 피드백이 없다. 네트워크 오류나 JSON 파싱 오류가 발생할 경우 예외 처리가 필요하다.

step 4. 코드의 장단점

장점:
- Promise 와 fetch 를 사용하여 비동기 데이터 요청을 간단하게 처리할 수 있다.
- useEffect 를 사용하여 컴포넌트가 렌더링된 후 데이터를 비동기적으로 가져올 수 있다.
단점:
- 오류 처리 로직이 부족하여 네트워크 요청이 실패할 경우 사용자에게 알리지 않고 있다.
- 비동기 작업이 완료되기 전에 컴포넌트가 렌더링되면 데이터가 화면에 표시되지 않을 수 있다.

step 5. 개선 방안 및 추가 학습 자료

개선 방안:
- catch 블록을 추가하여 네트워크 오류나 JSON 파싱 오류를 처리하는 것이 좋다.
- async/await 문법을 사용하여 비동기 코드를 더 간결하게 작성할 수 있다.
- import { useState, useEffect } from "react"; const App = () => { const [data, setData] = useState(null); const [error, setError] = useState(null); useEffect(() => { const fetchData = async () => { try { const response = await fetch("https://jsonplaceholder.typicode.com/posts/1"); if (!response.ok) { throw new Error('Network response was not ok'); } const result = await response.json(); setData(result); } catch (error) { setError(error.message); } }; fetchData(); }, []); return ( <div> {error && <p>Error: {error}</p>} {data ? <h1>{data.title}</h1> : <p>Loading...</p>} </div> ); }; export default App;
추가 학습 자료: 코드와 관련된 더 공부할만한 자료나 링크

step 6. 기타 메모

비동기 처리를 할 때는 항상 오류 처리와 데이터 상태 관리를 고래해야 한다.
Promise와 async/await 문법을 사용하면 비동기 작업을 더 효과적으로 관리할 수 있다.