분류 전체보기 (98) 썸네일형 리스트형 #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.. #6.3 Recap useEffect 새로운 데이터가 들어올 때마다, 변화가 일어날 때 컴포넌트를(ui를) 새로고침함 그르나 어떤 코드들은 계속 계속 실행하면 안될 수도 있음 그렇기 때문에 useEffect를 통해서 우리가 원할 때에 새로고침을 할 수 있음 함수의 인자는 실행하려는 코드, 지켜보려는 것으로만 이루어져 있음 useEffect(() => { console.log("나는 한번만 실행돼용"); }, []); //처음 실행시에 딱 한번만 실행되고 다시는 하지마라 useEffect(() => { console.log("나는 키워드가 변화할 때 실행됨요"); }, [keyword]); //시작할 때랑 keyword가 변화할 때 코드를 실행하고 싶다면 useEffect(() => { console.log("나는 카운터가 .. #6.2 Deps 글자를 타핑할때마다 api를 새로 호출한하고 가정하면 -> 겁나 별로 search keyword에 변화가 있을때만 검색하고 싶음 counter가 변화할 때에도 영화를 검색하고 싶지 않음 코드의 특정한 부분만이 변화했을 때 원하는 코드들을 실행할 수 있게 하고싶음 import { useEffect, useState } from "react"; function App() { const [counter, setValue] = useState(0); const [keyword, setKeyword] = useState("") const onClick = () => setValue((prev) => prev + 1); const onChange = (event) => setKeyword(event.target.v.. #6.1 useEffect useEffect 두개의 인자를(arguent)가지는 함수 첫번째 인자:우리가 딱 한번만 실행하고 싶은 코드(api를 딱 한번만 호출하고 싶을 때 등) 두번째 인자: 리액트가 지켜봐야 할 것, 이것이 변화할 때 리액트가 코드를 실행시킴 import { useEffect, useState } from "react"; function App() { const [counter, setValue] = useState(0); const onClick = () => setValue((prev)=> prev+1); console.log("항상 실행됨"); useEffect(()=>{ console.log("CALL THE API.."); },[]); return ( {counter} click me ); } expo.. 이전 1 2 3 4 5 ··· 13 다음
