분류 전체보기36 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. create-react-app CRA를 이용해 더 쉽게 react.js app을 만들 수 있음!! 개발 서버에 접근, 자동 새로 고침, CSS 포함 등이 사전 설정돼 있음 CRA 하기 전에 사전에 node -v 확인하고, npx 작동하는지 사전에 확인!! npx create-react-app 앱이름 해서 만들어준다. 개발환경이 훨씬 좋음! 2022. 9. 24. 이전 1 ··· 4 5 6 7 8 9 다음