Movie App

• React Router : 페이지 전환
  • Browser Router
    • url이 보통 웹사이트 처럼 생김.
  • Hash Router
    • 앞에 /#/이 붙음.
• Switch : Route 를 찾음 (Route는 URL을 의미)

• function App() {
   return <Router>
  	 <Routes>
  		 <Route path="/" element={<Home />} />
  	 </Routes>
   </Router>
  }

• 누군가 우리 웹사이트에 "/" url에 있다면 Home 컴포넌트를 보여준다.
• Link : 새로고침 없이도 유저를 다른 페이지로 이동시켜주는 컴포넌트.

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

• Dynamic url 도 지원함 : url에 변수를 넣을 수 있다.

• <Routes>
    <Route path="/movie/:id" element={<Detail />} />	// id앞에 ':' 안쓰면 그냥 텍스트 id쓴 것과 같음
  </Routes>

• useParams() : url 에 있는 변경되는 변수를 반환해준다.
  • 동적 라우팅을 설정해주어야한다.

 

• API & fetch 
  • API : React 애플리케이션에 사용되는 데이터를 의미한다.
    • API 는 지정된 엔드 포인트가 있는 JSON 형식의 세트 데이트로 구성된다.
  • fetch() : React 애플리케이션에서 API를 사용하는 방법 ( 자바스크립트 내장 Web API )
    • Web API : 클라이언트 측에서 사용할 수 있는 자바스크립트 내장함수

    • fetch('api 주소')
      .then(res => res.json())
      .then(res => {
        // data를 응답 받은 후의 로직
      });​

       
    • 1) method 가 get인 경우
      •  fetch() 에서 default method 값은 get 이다.
      • API 명세

        • 설명: 유저 정보를 가져온다.
          base url: https://api.google.com
          endpoint: /user/3
          method: get
          응답형태:
            {
                "success": boolean,
                "user": {
                    "name": string,
                    "batch": number
                }
            }​

      • get method 

        • fetch('https://api.google.com/user/3')
          .then(res => res.json())
          .then(res => {
            if (res.success) {
                console.log(`${res.user.name}` 님 환영합니다);
            }
          });​

           
    • 2) method 가 post 인 경우
      • fetch() 에 method 정보를 인자로 넘겨주어야 한다.
  • fetch().res.json()의 의미
    • 첫번째 then 함수에 전달된 인자 res는 http 통신 요청과 응답에서 응답의 정보를 담고 있는 객체이다.
  • fetch()는 비동기함수이므로 then을 써서 순서를 고정시켜준다.
  • then : "fetch() 다 끝나고 나서 이 일을 해줘"

  • useEffect(()=>{
        fetch(`https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year`)
        .then((res) => res.json())
        .then((json) => {
        setMovies(json.data.movies);
        setLoading(false);  
        });
      },[]);

• fetch 와 Async & await
  • 비동기코드를 동기코드처럼 보이게 작성할 수 있다.
  • await 는 async 함수 내부에 있지 않으면 사용할 수 없다.

  • const getMovies = async() => {
        const json = await (
          await fetch(
            `https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year`
            )
        ).json();
        setMovies(json.data.movies);
        setLoading(false);
      };
      useEffect(()=>{
        getMovies();
      },[]);