공부/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 문법 잘모르는 거 정리