728x90 반응형 React30 [React] Movie App 만들기! 기본 setting 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 import Button from "./Button"; import styles from "./App.module.css"; import {useState,useEffect} from "react"; function App(){ const[loading,setLoading]=useState(true); const[movies,setMovies]=useState([]); useEffect(()=>{ fetch( `https://yts.mx/api/v2/list_movies.json?minimum_rating=8.5&sort_by=year` ).then(resp.. 2022. 5. 5. [React] coin tracker 심화 - 달러를 비트코인 단위로 바꾸기 달러를 비트코인 단위로 바꾸기 기능이랑 컴포넌트들 여러개로 분할해봤다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 import Button from "./Button"; import styles from "./App.module.css"; import {u.. 2022. 5. 5. [React] Coin Tracker 만들기! 1. loading state 만들고 fetch를 통해 api 호출 useEffect를 사용해서 api한번만 호출할거기에 당연히 디펜던시가 빈배열이여야 한다. 그리고 useEffect안에 fetch통해서 api호출한다. https://www.daleseo.com/js-window-fetch/ [자바스크립트] fetch() 함수로 원격 API 호출하기 Engineering Blog by Dale Seo www.daleseo.com response로부터 json호출하는데 여기서 then은 api호출이 성공적일때 이후에 실행될 구문을 말한다. 2.useState 통해 json data 배열에 저장 이 json data들을 어떻게 보여줄 수 있을까? (사실상 json data가 코인 관련된것) 바로 useSta.. 2022. 5. 4. [React] to-do list를 만들어보자! 기본 setting 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 function App(){ const[toDo,setToDo]=useState(""); const onChange=(event)=>setToDo(event.target.value); const onSubmit=(event)=>{ event.preventDefault() if(toDo===""){ return; }else{ setToDo(""); } }; return Add To Do } Colored by Color Scripter cs input 앨리먼트에서 사용자가 입력하는 값을 listen하고 그것을 form 앨리먼트를 통해 submit 하는데, 새로고침 하는 것을 .. 2022. 5. 2. 이전 1 2 3 4 5 ··· 8 다음 728x90 반응형
