차근차근 배움터

영화 목록 상세 내용을 불러올 수 있었다 다른 분들이 만든 멋진 화면들을 공유해본다 React App mascaradee.github.io https://brilliant-froyo-4c6888.netlify.app/ 이분은 예고편까지 넣으셨다 React App brilliant-froyo-4c6888.netlify.app Detail.js import { useParams } from "react-router-dom"; import { useEffect, useState } from 'react'; function Detail() { const { id } = useParams(); const [movie, setMovie] = useState([]); const getMovie = async () =..

실제 map()을 사용하는 곳에서는 에러가 없는데 메인 페이지에서 클릭하기도 전에 에러가 났다 영화 목록이 나열되어 있는 메인 페이지에서는 개별 movie의 데이터가 없기 때문에 불러 올 수 없다는 것 같아서 아래와 같이 존재하면 출력하게 변경했다. {/* 에러부분 왜 나는 지 모르겠음 */} {movie.genres ? genre: {movie.genres.map((genre) => {genre})} : null}

먼저 React Router 를 사용하기 위해서 몇 가지 import 해야 함 import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom"; Switch는 Route를 찾는 것 Route는 웹브라우저 상에 입력된 url을 말한다 route를 찾으면 컴포넌트를 Rendering한다 App.js 강의가 조금 옛날 꺼라서 프론트엔드가 슉슉 바뀌는 것도 감안해서 강의에서 설명하던 Switch라는 기능은 Routes로 변경되었다. import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'; import Home from './routes/Home'; funct..

해당 에러가 발생하는 이유는 버전 때문이다 나의 경우에는 react-router-dom version 5를 사용하고 있었는데 Routes 즉 5 버전에서 Switch였던 이 기능을 사용하려면 버전 업데이트가 필요했다. 버전을 확인하려면 react 프로젝트 안에서 package.json 를 통해서 확인할 수 있다. 기존에는 ^5.3.4 버전이었는데 새로 설치하기 위해서 먼저 1. 기존의 react-router-dom을 삭제 했다 $ npm uninstall react-router-dom 그리고 그냥 설치하면 자꾸 5버전이 설치 되길래 제일 최신 버전으로 설치했다. 2. 최신 버전 react-router-dom 설치 npm i react-router-dom@latest 그럼 해당 에러는 사라질 것이다!

{movie.title} {movie.summary} {movie.genres.map((genre) => {genre})} medium_cover_image 자바스크립트에서는 왼쪽보다 오른쪽처럼 작성 mediumCoverImage import PropTypes from "prop-types"; Movie component의 proptype 설정 Movie.propTypes = { coverImg: PropTypes.string.isRequired, title: PropTypes.string.isRequired, summary: PropTypes.string.isRequired, genres: PropTypes.arrayOf(PropTypes.string).isRequired, } React Router ..

기본 틀에서 다시 로딩 구현 부분과 API Fetch 부분을 연습해 본다 영화 목록을 가져온다 import { useState, useEffect } from 'react'; function App() { return ( ); } export default App; api url https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year useEffect(() => { fetch("https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year") .then((response) => response.json()) .then(json => { console.log(json); setM..

https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year 이 영화 api 정보들을 가지고 만들어본다 then 보다 자주 사용하는 최신 async-await useEffect(() => { fetch("https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year") .then((response) => response.json()) .then(json => { setMovies(json.data.movies) setLoading(false); }); }, []); 아래와 같이 변경할 수 있다 흠... 외워야 하나 const getMovies = async () => { const ..

기존 코드 ※ 숙제 삭제 기능 구현하기 import { useState } from "react"; function App() { const [toDo, setToDo] = useState(""); const [toDos, setToDos] = useState([]); const onChange = (event) => { setToDo(event.target.value); } const onSubmit = (event) => { event.preventDefault(); if (toDo === "") return; setToDos((currentArr) => [toDo, ...currentArr]); setToDo(""); } const deleteItem = (event) => { console.log..

map() ['1','2','3'].map((current)=>current+'zzz'); // 결과 // ['1zzz', '2zzz', '3zzz'] map은 하나의 array에 있는 item을 내가 원하는 것으로 바꾸는 역할을 하고 새로운 array를 준다 map() 함수는 첫번째 arument로 현재의 item을 가져올 수 있다 또한 index도 사용 가능! const fruits = ['orange', 'banana', 'kiwi']; fruits.map((c, i)=> `${i+1}. ${c}`); // 결과 ['1. orange', '2. banana', '3. kiwi'] 경고 같은 component의 list를 render할 때는 key라는 prop을 넣어줘야 한다 고유한 key가 필요하다..

배운 것들을 복습하는 시간 ※ state를 직접 수정할 수 없다 toDos.push(); // 불가능 toDo = "" 잘못된 예 배열을 합칠 때 ... 이용하기 const food = [1,2,3,4,5]; const newFood = [100, ...food]; submit 동작을 막는 함수 event.preventDefault() 전체 코드 import { useState } from "react"; function App() { const [toDo, setToDo] = useState(""); const [toDos, setToDos] = useState([]); const onChange = (event) => { setToDo(event.target.value); } console.log(t..