반응형
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 |