리액트 기기기초 (33) 썸네일형 리스트형 #7.6 Parameters react router는 동적 url을 지원 동적 -> url에 변수를 넣을 수 있다는 의미 :를 붙여줘야 함, 안그러면 진짜 텍스트임 useParams -> 변수의 값을 넘겨줌 await는 asyns함수 내부에 있지 않으면 사용할 수 없음 import { BrowserRouter as Router, Route, Switch, } from "react-router-dom"; import Detail from "./routes/Detail"; import Home from "./routes/Home"; function App() { return ( Hello ); } export default App; import PropTypes from "prop-types"; import {Link} from "re.. #7.5 React Router react-router-dom:컴포넌트들의 모음집 url이 바뀌면 어떤 걸 보여줄지 결정함 Router은 렌더링해주는 애 route는 url을 의미 switch는 route를 찾는 역할, 한번에 하나의 route만 렌더링 하기 위함 Link는 브라우저 새로고침 없이도 유저를 다른 페이지로 이동시켜주는 컴포넌트 이전에는 app컴포넌트가 모든걸 다 하고 있었음 그 다음에는 app컴포넌트에 만들었던 모든 로직을 별개의 장소로 옮김 현재 app.js에서 react-router-dom의 컴포넌트를 가져다 쓰는 중 import PropTypes from "prop-types"; import {Link} from "react-router-dom"; function Movie({ coverImage, title, su.. #7.4 Movie App part Two key는 react.js안에서만, map안에서 component들을 render할 때 사용함 props로써 우리의 component로 넘겨 component들이 받아서 사용하게 해줌 react router : 페이지를 전환하는 역할 app.js는 router를 render -> router은 url을 보고 있는 컴포넌트 Select and Ctrl + D 하면 vs코드 한번에 선택됨 Movie 컴포넌트 따로 만들어서 import 해온 뒤 prop으로 가져옴 import { useEffect, useState } from "react"; import Movie from "./components/Movie"; function App() { return null; } export default App; app.. #7.3 Movie App part One map을 쓰려면 key를 꼭 줘야 함 fetch, json을 진행 후 로딩을 끝냈기 때문에 반드시 setLoading(false)를 해줘야함 then대신에 async-await를 보편적으로 사용함 await을 감싸는 await을 만들 수 있음 movies.map((movie ->map의 argument는 x, m, g 등등 마음대로 해도됨 여기선 movie라고 정함 div key={movie.id} h2{movie.title}/h2 -> 이 컴포넌트들은 movie 배열에 있는 각 movie에서 변형되어 나온 것 key={g} -> 따로 정해진 key가 없기 때문에 g를 가져와 key로 써줌 단, g가 고유한 값일 경우에만 가능 import { useEffect, useState } from "react".. #7.2 Coin Tracker select에 있는 값을 가져오고 싶다면 onChange함수를 사용한 후, option의 value값을 지정해주면 useState함수에서 set함수를 사용해서 가져오면 된당 함수가 1,2,3,4,5가 있다면 동기함수는 1끝나고 2, 2끝나고 3 이런식으로 순차적으로 진행하고 비동기함수는 순서와 상관없이 완성된 쪽이 실행결과를 return fetch함수는 비동기적으로 처리되는 함수, fetch가 끝나기도 전에 다른 함수가 먼저 실행될 수 있기 때문에 then을 써서 순서를 고정시킴 then은 fetch끝나고 나서 실행해줘!라는 뜻이당 fetch('api 주소') .then(res => res.json()) .then(res => { // data를 응답 받은 후의 로직 }); import { useEffe.. #7.1 To Do List part Two map() : array 각각의 element를 바꾸고 싶을때 사용하는 것 [a,b,c].map()을 하면 각각의 a,b,c에 대해 map안에 적은 함수가 6번 실행됨 그 함수로부터 return한 어떤 값은 새로운 array에 들어감 array를 가져와서 그 array의 item을 변형해서 li가 되도록 한것 import { useEffect, useState } from "react"; function App() { const [toDo, setToDo] = useState(""); const [toDos, setToDos] = useState([]); const onChange = (event) => setToDo(event.target.value); const onSubmit = (event) =>.. #7.0 To Do List part One array를 직접적으로 수정하지 않으면서 setToDos로 array에 element를 추가하는 방법 import { useEffect, 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((currentArray) => [toDo, ...currentArray]); setToDo(".. #6.4 Cleanup component는 단지 jsx를 부르는 function임 우리가 component를 show할 때 함수가 작동됨 컴포넌트가 제거될때 뭔가 할 수 있도록 해주는 애 = cleanup function 컴포넌트가 파괴될 때도 function을 실행하고 싶으면 hiFn이 byFn을 return해야함 function byeFn(){ console.log("bye :("); } function hiFn() { console.log("created :)"); return byeFn; //컴포넌트가 파괴될 때 실행 } useEffect(hiFn,[]); import { useEffect, useState } from "react"; function Hello() { useEffect(()=> { console.log.. 이전 1 2 3 4 5 다음
