todo list

머리가 비상하지않으므로 열심히 노력해야한다.

느껴진다! 재능이 없다면 재능이 있는척 열심히 따라가야지

 

코딩애플에서 쇼핑몰프로젝트를 완성하고 github에 잔디를 심었다.

github는 사실 공부를 했단걸 보여주는 목적으로 올리고있는데 매일매일 올리는 재미가있다.

이제는 노마드코더를 보며 따라하고있다.

 

이렇게 따라하는것부터 시작해서 조금 익숙해지면 멘땅에 해딩하는것을 해봐야겠다!

 

간단한 todolist를 따라해보고 githu에 올렸으나, 블로그에도 코드 기록을 남겨봐야겠다

import logo from './logo.svg';
import {useState, useEffect} from "react"
import './App.css';

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)
  }


 //form submit 내장되어있음. 찾아보기
  return (
    <div className="App">
      <h1>My ToDos({toDos.length})</h1>
      <form onSubmit = {onSubmit}>
      <input onChange= {onChange} 
              value = {toDo}
              type = "text" 
              placeholder = "wirte your to do">
       </input>
       <button>Add To Do</button>
       </form>
       <hr />
       <ul>
       {toDos.map((todo, index)=>{
        return <li key={index}>{todo}</li>
       })}
       </ul>
    </div>
  );
}

export default App;