URL 받아오기

function App() {
  const [loading,setLoading] =useState(true)
  const [movies,setMovies] = useState([])
  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)
    })
  },[])
  return (
    <div>
      {loading? <h1>Loading...</h1>:null}
      {movies.map(movie=><div key={movie.id}>{movie.title}</div>)}
    </div>
  );
}

export default App;

이런식으로 fetch 를 이용하고 then 을 이용해서 받아온다

→ 하지만 요즘은 async-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)
}

useEffect(()=>{
  getMovies()
},[])

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

• 한번더 줄이기

return (
	<>
    {loading ? <h1>Loading...</h1>:null}   
    {movies? 
      <div>
        {movies.map((movie)=>(
        <div key={movie.id}>
          <img src={movie.medium_cover_image}/>
          <h1>{movie.title}</h1>
          <h4>{movie.summary}</h4>
        </div>
        ))}
      </div>
      :""}
  </>
);
}

export default App;

movies 가 있다면 div 태그 안에 movies를 map()으로 하나씩 보여준다.

Component 사용하기

<div>
  {movies.map(movie=>(
    <Movie key={movie.id} movie={movie}/>
  ))}
</div>

Movie.js

function Movie(props){
  const {movie} = props
  
  return (
  <div>
    <img src={movie.medium_cover_image} alt="title"/>
    <h1>{movie.title}</h1>
    <h4>{movie.summary}</h4>
  </div>)
}
export default Movie

Router

$ yarn add react-router-dom

router 사용법

import Home from "./routes/Home.js"
import Detail from "./routes/Detail.js"
import {BrowserRouter,Routes,Route} from 'react-router-dom'

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home/>}/>       
        <Route path="/movie" element={<Detail/>}/>       
      </Routes>
    </BrowserRouter>
  )
}

export default App;

• 강의에는 Switch였지만 ES6부터는 routes로 바꿔줘야한다.
• 또한 <Route>안의 element값으로 원하는 component를 넣어야한다.

link

• <a>태그로 화면을 넘겨도 되지만 새로고침이 일어난다.
• link를 사용하면 새로고침 없이 다른 페이지로 이동 가능하다.

dynamic parameter

• url에 값 보내주고 받는 법

<Route path="/movie/:id" element={<Detail/>}/>

:id 로 주게 되면 받아올 때 id 라는 변수 안에 값이 저장되어있음

• 파라미터 받는 방법

  import {useParams} from 'react-router-dom'
  
  function Detail(){
  	const x = useParams()
  	console.log(x) => [id:'1231412'] 이 출력됨
  	return ()
  }

  useParams()

디테일 페이지

import { useEffect, useState } from 'react'
import {Link,useParams} from 'react-router-dom'

function Detail(){
  const {id} = useParams()
  const [movie,setMovie] = useState([])

  const getMovie = async()=>{
    const json = await(
      await fetch(`https://yts.mx/api/v2/movie_details.json?movie_id=${id}`)
      ).json()
    setMovie(json.data.movie)
  }
  useEffect(()=>{
    getMovie()
  },[])
  return (
  <div>
    <h1>{movie.title}</h1>
    <h1>{movie.overview}</h1>
    <img src={`${movie.medium_cover_image}`}></img>
    <Link to="/"><h1>돌아가기</h1></Link>
    <h4>id:{id}번</h4>
    {/* [id:'23232'] */}
  </div>
)
}
export default Detail

• movie로 state를 만들어 주고 그 값에
• async 와 await , fetch를 이용해서 json의 값을 넣어준다.
• img 태그 안의 src 쓰는법 <img src={${movie.medium_cover_image}}>
  

Publishing

npm i gh-pages

• gh-pages = 깃헙에서 배포해주는 서비스

npm run build

• 코드가 압축되고 모든게 최적화 시켜주기

package.json에서 맨밑에 추가 해준다.

"homepage": "https://bbnerino.github.io/Toy"

“homepage” : github아이디 . github.io/ 이게 있는 레포지토리

• 레포지토리 확인 방법 : git remote -v
  

Scripts에 추가

"scripts":{
...
"deploy": "gh-pages -d build",
"predeploy":"npm run build"
},

npm run deploy 를 하게되면 먼저 predeploy 가 실행된다.

"gh-pages -d build"

이게 하는 일은 gh-pages가 build 폴더를 아까 적은 웹사이트에 업로드하도록 하는 것