반응형
1. 리액트 상태 변경 시, constants을 보낼때와 function을 보낼때 차이
const [toDo, setToDo] = useState(""); const [toDos, setToDos] = useState([]); setToDos((currentArray) => [toDo, ...currentArray]); //setToDos에 함수를 보낸다. => 함수를 보낼때 첫번째 인자는 현재state다! 따라서 currentArray 인자는 현재 상태를 뜻한다. setToDo(""); //setToDo에 constants를 보낸다.
풀코드
import { 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(); console.log(toDo); if(toDo === ""){ return; } setToDos((currentArray) => [toDo, ...currentArray]); //setToDos에 함수를 보낸다. => 함수를 보낼때 첫번째 인자는 현재state다! 따라서 currentArray 인자는 현재 상태를 뜻한다. setToDo(""); //setToDo에 constants를 보낸다. }; console.log(toDos); return ( <div> <h1>My To Dos ({toDos.length})</h1> <form onSubmit={onSubmit}> <input onChange={onChange} value={toDo} type="text" placeholder="입력하세요..."></input> <button>클릭</button> </form> {toDos} </div> ); } export default App;
반응형
'공부 > React & Next.js' 카테고리의 다른 글
CSS Grid, Flex (0) | 2022.11.21 |
---|---|
[React] 배열 다룰 때 사용하는 함수 (0) | 2022.11.21 |
노마드 코더 Coin Tracker 챌린지 문제 (0) | 2022.11.14 |
[React] React의 상태 관리 (0) | 2022.01.23 |
[React] 클래스형 컴포넌트 vs 함수형 컴포넌트 (0) | 2022.01.17 |