ch.7 [2021 UPDATE] PRACTICE MOVIE APP

[Youngju-Jang]

[Youngju-Jang]

1. todo list

• [] with useState
• list with map

[Youngju-Jang]

2. Coin Tracker

data : https://api.coinpaprika.com/v1/tickers

function App() {
  const [loading, setLoading] = useState(true);
  const [coins, setCoins] = useState([]);
  useEffect(() => {
    fetch("https://api.coinpaprika.com/v1/tickers")
      .then((response) => response.json())
      .then((json) => {
        setCoins(json);
        setLoading(false);
      });
  }, []);
  return (

<ul>
        {coins.map((coin) => (
          <li>
            {coin.name} ({coin.symbol}) : {coin.quotes.USD.price}
          </li>
        ))}
      </ul>

: html부분과 js 같이쓰기위해 백틱 + ${} 사용

<h1>The Coins! {loading ? "" : `(${coins.length})`}</h1>

[Youngju-Jang]

7.3 Movie App part One

• 페이지 전환기능

• api link

detail link : https://yts.mx/api/v2/movie_details.json?movie_id=~~~

• 화면 이동하기
• Movie component 분리
• routes 폴더 생성

npm i react-router-dom@6.3.0

[Youngju-Jang]

7.5 React Router

• a tag 대신 link 를 사용 > 전체 새로고침이 아니라, 컴포넌트만 변경됨
• Route, Link 사용

[Youngju-Jang]

7.6 Parameters

• url 의 parameter값 가져오기
• ~~/:Id >> ~~/123 >> id값 가져오기

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

import { useParams } from "react-router-dom";
const { id } = useParams();

[Youngju-Jang]

7.7 Publishing

npm i gh-pages

: 깃허브에 결과물 올려줌

npm run build

1. package.json 설정추가
   • "homepage": "https://Youngju-Jang.github.io/ReactMovie"
   • https://아이디.github.io/레포명

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

   • npm run deploy 실행시 predeploy먼저 실행되고 deploy부분이 실행되며
   • build폴더가 생성됨
   • https://Youngju-Jang.github.io/ReactMovie 으로 들어가면 배포된 페이지를 볼 수 있다.