개발/react21 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. react의 useEffect는 딱 한번만 실행되며 dependency에서 변화되는 것을 지켜봄!! useState는 상태가 바뀔 때마다 매번 실행되지만, api 호출 같은 상황에서는 코드가 처음 한번만 실행되고 다시는 실행되지 않기를 바랄 수 있음. 이 때 useEffect를 사용함. useEffect(()=> { console.log("Call the API...")}, []) 이것이 없으면 항상 refresh state를 함! 또한 useEffect는 useEffect(() => { 실행되는 코드}, [dependency]) 로 구성됨 dependency는 실행되는 조건을 의미하며 변화되는 것을 '지켜보는 것'을 의미함. useEffect(() => { console.log("I run only once.")}, []) useEffect(() => { console.log("I run when '.. 2022. 9. 25. 이전 1 2 3 4 5 6 다음