React - fetch, async-await, routers, component

Promise를 가장 자주 체감하는 순간 API호출할 때이다.
const response = fetch("/api/users"); 이 시점에는 아직 데이터가 없다. 그래서 fetch()는
Promise Response를 반환 = 나중에 Response를 준다 라는 약속(Promise)객체를 반환

fetch("/api/users")
.then((response) => response.json()) // 약속된 객체를 반환
.then((data) => {
console.log(data);
});
// then()이 Promise를 처리하는 방식이다.

• fetch

  useEffect(() => {
    fetch("https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year")
    .then((response) => response.json())
    .then((json) => {
      setMovies(json.data.movies)
      setLoading(false); // 로딩을 끝냈기 때문에 false로 만들어준다.
    });
  }, []);
  console.log(movies);

http 요청을 보내기 위해 사용하는 web api
데이터를 가져오기 위한 기본 도구 GET, POST
fetch는 Promise를 반환한다.

• async-await를 사용

promise 기반 비동기 코드를 읽기 쉽고 깔끔하게 작성할 수 있게 도와주는 문법 내부적으로 then()을 쓰는 것과 동일하지만 코드 가독성이 좋다.

const getMovies = async () => {
    const response = await fetch("https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year");
    const json = await response.json();
    setMovies(json.data.movies);
    setLoading(false);
    };
  }

이 코드를 줄이기 위해 await 안에 또 await 호출 가능

const getMovies = async () => {
  const response = await fetch(
    "https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year"
  );
  const json = await response.json();
  setMovies(json.data.movies);
  setLoading(false);
};

async/await (요즘 자주 사용하는 것)

비동기 작업 (API 호출, 파일 읽기) 등 처리할 때 쓰는 것이다.
비동기 작업을 순서대로 처리하고 싶을 때 쓴다.

1) fetch() 또는 axios()로 API를 호출하고자 할때
2) DB, 파일을 비동기적으로 읽을 때
3) 시간이 오래 걸리는 작업의 결과를 기다릴 때

await은 async로 감싸줘야 사용할 수 있다.

// fetch() 결과를 기다린 후 처리하고 싶을 때 사용
const response = await fetch("https://api.example.com/data");

• 함수에 사용

async function 함수이름() {
  const result = await 비동기작업();
}

• 화살표 함수로 사용

const 함수이름 = async () => {
  const result = await 비동기작업();
}

• try-catch 에러처리

const getData = async () => {
  try {
    const res = await fetch("https://api.example.com/data");
    const data = await res.json();
    console.log(data);
  } catch (err) {
    console.error("에러 발생:", err);
  }
};

fetch(), axios(), setTimeout(), localforage.getItem() 같은 비동기 함수를 쓴다면 → async/await 쓰세요.

"뭔가 기다려야 결과가 나오는 작업"이면 await를 쓸 수 있습니다.

• 차이점

1) JSON 파싱
fetch : 직접 해야 한다.

const response = await fetch("/api/users");
const data = await response.json();

axios : 자동

const { data } = await axios.get("/api/users");

2) HTTP 에러처리
fetch : 404, 500이어도 성공으로 처리 -> 직접 체크를 해야한다.

const response = await fetch("/api/users");
console.log(response.ok); //false
console.log(response.status); //404

if(!response.ok){
	throw new Error("API Error");
}

axios : 404, 500이면 자동으로 catch로 간다.

try {
	await axios.get("/api/users");
} catch (error) {
	console.log("에러");
}

3) 인터셉터 : axios의 큰 장점 모든 요청에 토큰 자동 추가 가능하다.

axios.interceptors.request.use((config) => {
  config.headers.Authorization = `Bearer ${token}`;
  return config;
});
// 응답
axios.interceptors.response.use(
  (response) => response,
  async (error) => {
    if (error.response.status === 401) {
      // 토큰 재발급
    }
  }
);

4) Next.js와 궁합이 좋다.
서버 컴포넌트 지원, 캐싱 지원, revalidate 지원

fetch vs axios

1) fetch :
Next.js
BFF 구조
단순 API 호출
의존성 줄이고 싶음

2) axios :
토큰 자동 주입
토큰 갱신(Refresh)
인터셉터 필요
기존 React SPA 프로젝트

const user = await proxyFetch<User>("/users");

proxyFetch도 fetch를 axios처럼 사용하기 위한 래퍼 함수를 만드는 패턴이다.
response.ok 체크, JSON파싱, 에러 처리 등을 proxyFetch 안에 숨겨두는 것이다.

• 배열을 가져오기

<ul>
	{movie.genres.map((g) => (<li key={g}>{g}</li>))}
</ul>

component 사용하기

import PropTypes from "prop-types";

export default function Movie({coverImg, title, summary, genres}) {
    return (
        <div>
            <img src={coverImg} alt={title}/>
            <h2>{title}</h2>
            <p>{summary}</p>
            <ul>
            {genres.map((g) => (
                <li key={g}>{g}</li>
            ))}
            </ul>
        </div>
    ) 
}

Movie.PropTypes = {
    coverImg: PropTypes.string.isRequired,
    title: PropTypes.string.isRequired,
    summary: PropTypes.string.isRequired,
    genres: PropTypes.arrayOf(PropTypes.string).isRequired,
};

PropTypes를 설정해서 필수 여부를 검사한 뒤 오류를 예방한다.
React에서 제공하는 props타입 검증 도구 잘못된 props가 전달되면 경고를 띄워준다. 사용자 실수나 예기치 않은 버그를 미리 잡아주는 안전장치

React Router 페이지 전환

npm install react-router-dom을 해준다

route별로 생각해 봐야 한다. home, 홈스크린, 홈페이지 등
src>routes
src>components

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Home from "./routes/Home";
import Detail from "./routes/Detail";

export default function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/movie/:id" element={<Detail />} />
      </Routes>
    </Router>
  );
}

React Router v6에서 Routes와 element를 사용해야 한다.
React Router v5에서는 Switch와 children을 사용한다.