분류 전체보기142 [React] 7-6. React로 영화 앱 만들기 (4) (dynamic URL 사용해보기) 📌 다이나믹 url 사용해보기 React Router에서는 다이나믹(동적) url을 지원해준다. ✔️ 다이나믹 url url에 변수를 넣는 경우를 말한다. ex) http://localhost:3000/movie/12 에서 12 주목! 우리는 user가 어떤 영화의 제목을 클릭하면 http://localhost:3000/movie/{특정 movie의 id} 로 주소를 이동하는 코드를 작성해 볼 것이다. 그러기 위해서는 아래와 같이 route에서 path를 수정한다. function App() { return ( // 주목! ..... Detail 컴포넌트를 보여주는 path에 '/movie/:id'라고 적어주었는데, :id라고 적을 경우 그 자리에 1이든 2든 우리가 원하는 무엇이든지 그 .. 2023. 6. 7. [React] 7-5. React로 영화 앱 만들기 (3) (Router 사용해 보기) 📌React Router를 사용하는 방법 1. react router 튜토리얼에서 다음과 같은 코드를 복사해 App.js 파일의 윗부분에 붙여넣는다. import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; App 컴포넌트에는 Router 컴포넌트와 Routes 컴포넌트를 작성한다. 우리는 지금 누군가가 만들어 놓은 컴포넌트를 가져다 사용하는 중이다. Switch 컴포넌트는 Route를 찾는 역할을 한다. Route 컴포넌트에서는 원한다면 여러개를 렌더링하는 것이 가능하다. 하지만 우리는 하나의 Route만 렌더링되길 원하므로 Switch 컴포넌트를 사용한다. but 지금 버전에서는 Switch를 사용하지 않게 되어 있으므로 대.. 2023. 6. 7. [React] 7-4. React로 영화 앱 만들기 (2) (Router 알아보기) 📌 React.js 앱에서 페이지 전환하기 🙂 목표: 영화 제목을 누르면 다른 페이지로 이동하게 만들 것이다. 1. 이전 시간에 작성한 코드를 깔끔해 보이도록 정리한다. (props 사용) 1-1. component를 만들 수 있다는 React의 장점을 이용하여 loading이 끝났을 때 영화를 화면에 보여주는 부분은 따로 컴포넌트를 만들어 사용하도록 하였다. Movie.js 파일을 새로 만들어 Movie 컴포넌트를 작성한다. Movie component는 그냥 Movie라고 불리는 함수일 뿐이다. function Movie({ coverImg, title, summary, genres }) { return ( {title} {summary} {genres.map((g) => ( {g} ))} ); } .. 2023. 6. 7. [React] 7-3. React로 영화 앱 만들기 (1) 📌 영화 앱 만들기 시작! ✔️ 영화를 보여주고, 그 영화들에 대한 정보도 좀 보여주고, 거기에 링크까지 넣어 그 영화에 대해 더 많은 것을 찾아볼 수 있도록 앱에서 다른 곳으로 연결을 시켜주는 기능을 넣은 영화 앱을 제작해 볼 것이다. 우리는 지금까지 하나의 상호작용이 있는 스크린을 만들어 왔다. 하지만 다른 페이지로 전환하는 것을 지금부터 해 볼 것이다. 1️⃣ 가장 먼저, 영화들을 화면에 모두 보여주기 위한 API가 필요하다. 많은 영화 정보들을 받을 수 있는 API를 통하여 영화를 가져올 것이다. 주소창에 https://yts.mx/api/v2/list_movies.json?minimum_rating=8.5&sort_by=year 라고 입력하면 json 형식의 많은 영화 데이터들을 볼 수 있다. .. 2023. 6. 7. 이전 1 ··· 23 24 25 26 27 28 29 ··· 36 다음
