Dev/React14 [React] #7.6 Parameters App.js import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'; import Detail from './routes/Detail'; import Home from './routes/Home'; // :id 변수 id function App() { return Hello ; } export default App; Movie.js import PropTypes from "prop-types"; import { Link } from "react-router-dom"; function Movie({ id, coverImg, title, summary, genres }) {// id를 prop으로 받기 return ( {title}.. 2022. 6. 14. [React] #7.5 React Router react-router-dom 버전 package.json 에서 기존 버전을 확인할 수 있다. App.js import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'; import Detail from './routes/Detail'; import Home from './routes/Home'; //Switch : 경로 하나에 하나의 렌더링을 하기위해 사용 //Route path='URL' -> URL에 따라서 컴포넌트 실행 function App() { return Hello ; } export default App; Movie.js import PropTypes from "prop-types"; import { Link } fr.. 2022. 6. 14. [React] #7.4 Movie App part Two App.js import { useEffect, useState } from 'react'; import Movie from './components/Movie'; function App() { return null; //router를 render함 //-> router는 URL을 보고있는 component고 //URL이 localhost면 Home.js , /movies/122 이면 Detail.js을 보여주는 식 } export default App; /routes/Home.js import { useState } from "react"; import Movie from "../components/Movie"; function Home () { const [loading, setLoading] = u.. 2022. 6. 14. [React] #7.3 Movie App part One import { useEffect, useState } from 'react'; function App() { const [loading, setLoading] = useState(true); const [movies, setMovies] = useState([]); const getMovies = async() => { const json = await( await fetch( //then과 같은 await `https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year` )).json(); setMovies(json.data.movies); setLoading(false); } useEffect(() => { getMovies(); },.. 2022. 6. 14. 이전 1 2 3 4 다음
