React 복습 - fetch, async-await, routers, component

링크 -> 더 많은 것을 찾아볼 수 있또록 더 많은 정보를 확인할 수 있도록..

//object를 보면

• 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 비동기작업();
}

• 기본 fetch 예제

async function getData() {
  const response = await fetch("https://api.example.com/data");
  const json = await response.json();
  console.log(json);
}

• 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를 쓸 수 있습니다.

• 배열을 가져오기

<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을 사용한다.

• Link 컴포넌트
  브라우저 새로고침 없이, 유저를 다른 페이지로 이동시켜주는 컴포넌트

<Link to="/movie">{title}</Link>