개발26 react의 useEffect는 api call 할 때 많이 사용!! 코인 정보를 가져올 때 우선 useState는 로딩, 로딩후 상태 업데이트에 사용하고 true-> false 또한 코인 상태를 저장하는 것에 사용한다. [] -> [코인 값 json] 그리고 useEffect는 코인 api를 fetch한 다음에 setLoading을 false로 바꿔준다. 그리고 html에는 각 coin의 목록을 li에 넣어준다. import { useEffect, useState } from "react"; function App() { const [loading, setLoading] = useState(true); const [coins, setCoins] = useState([]) useEffect(() => { fetch("https://api.coinpaprika.com/v1/.. 2022. 9. 26. react에서 to-do-list 만들기는 바닐라 js에 비해 너무 쉬움!! toDos를 가져온 다음에 map 함수를 이용해서 하나씩 뽑아서 li에 넣어주기만 하면 됨!! li 마다 index가 필요하기 때문에 li의 key로 index 하나 넣어주고 {toDos.map((toDo, index)=> {toDo})} 결론적으로 전체 코드 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 (t.. 2022. 9. 26. react array에서 [a, ...b]의 사용!! react에서 todo list를 만들 때 useState를 이용해서 추가될 때마다 상태를 업데이트한다. onChange 함수로 toDo가 바뀔때 그것을 modifier 함수에 지정해준다. 또한 onSubmit 함수로 제출할 때 새로고침 방지해주고 아무것도 입력되지 않으면 비워준다. 또한 toDos array를 만들고, 어떤 toDo가 추가되면 현재 array에 새로운 toDo를 추가해준다. setToDos((currentArray) => [toDo, ...currentArray])의 사용에 주의한다. import { useEffect, useState } from "react"; function App() { const [toDo, setToDo] = useState("") const [toDos, s.. 2022. 9. 26. react에서 useState와 useEffect 사용 예시!! import { useEffect, useState } from "react"; import Button from "./Button"; function App() { const [counter, setValue] = useState(0) const [keyword, setKeyword] = useState("") const onClick = () => setValue((prev) => prev+1) const onChange = (event) => setKeyword(event.target.value) console.log("I run all the time") useEffect(() => { console.log("Call the api..") }, []) useEffect(() => { if (key.. 2022. 9. 25. 이전 1 2 3 4 5 6 7 다음