React JS / to do list_Practice

1. const [] = useState("); 는 자주 쓰이게 될 기본 코드이다.

  첫번째 값 = default 

  두번째 값 = modify default 

  useState() 괄호 안의 값은 default 값을 의미.

 

2. setToDos((currentArray)) => [toDo, ...currentArray]); 

  currentArray는 임의로 명명한 값으로 어떤 값을 넣어도 상관없다. 뒤에 대괄호 안에 (...)은 currentArray의 모든 값을 나타내는 의미로 바로 앞에 toDo값에 이어서 currentArray의 값을 이어 붙인다는 뜻으로 사용된다. toDo.push()와 같다.

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();
    if (toDo === "") {
      return;
    }
    setToDos((currentArray) => [toDo, ...currentArray]);
    setToDo("");
  };
  console.log(toDos);
  return (
    <div>
      <h1>My To Dos ({toDos.length}) </h1>
      <form onSubmit={onSubmit}>
        <input
          onChange={onChange}
          value={toDo}
          type="text"
          placeholder="write your todo..."
        />
        <button>Add To Do</button>
      </form>
    </div>
  );
}

export default App;

Vanila JS 와는 다른 코드 구성 및 형태임으로 React JS에 익숙해지려면 약간의 시간이 필요하다. 그렇지만 둘다 Javascript를 기반으로 하기 때문에 전체적인 코드들은 그 뼈대가 같다고 보면 된다.