공부/React & Next.js

[React] 리액트 , ES6 문법 잘모르는 거 정리

bumcrush 2022. 11. 11. 21:58
반응형

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] 리액트 , ES6 문법 잘모르는 거 정리